Inhaltsverzeichnis
回复讨论(解决方案)
Heim Web-Frontend HTML-Tutorial 相对遮罩层怎么做啊,求高手_html/css_WEB-ITnose

相对遮罩层怎么做啊,求高手_html/css_WEB-ITnose

Jun 21, 2016 am 09:44 AM

<table>  <tr>     <td  style="background-image: url('images/remenbg1.png');" onmouseover="" onmouseout="">           这里当鼠标放到这个Td上的时候,背景图不变,Td显示半透明状态,这些文字不能为透明效果.这里怎么做啊,     </td>  </tr></table>
Nach dem Login kopieren

就像这个一样,
http://sh.qihoo.com/hot/

求高手啊


回复讨论(解决方案)

全兼容方式的话,分三个部分构造
原结构  遮罩  文字
原结构使用position:relative;
遮罩和文字使用postion:absolute;
遮罩的透明度opacity根据自己需要去设置,注意IE和chrome/ff下的设置方式不同
遮罩的z-index可以设置为10,然后文字的设置为11
根据top和left调整文字的相对位置为合适

全兼容方式的话,分三个部分构造
原结构  遮罩  文字
原结构使用position:relative;
遮罩和文字使用postion:absolute;
遮罩的透明度opacity根据自己需要去设置,注意IE和chrome/ff下的设置方式不同
遮罩的z-index可以设置为10,然后文字的设置为11
根据top和left调整文字的相对位置为合适

恩 你的意思是 他每个遮罩都算出位置?


全兼容方式的话,分三个部分构造
原结构  遮罩  文字
原结构使用position:relative;
遮罩和文字使用postion:absolute;
遮罩的透明度opacity根据自己需要去设置,注意IE和chrome/ff下的设置方式不同
遮罩的z-index可以设置为10,然后文字的设置为11
根据top和left调整文字的相对位置为合适

恩 你的意思是 他每个遮罩都算出位置?
不用啊,就拿例子里面的来说。你要给一个小块块(Box)做遮罩的话,Box用postion:relative;,然后遮罩部分用那个postion:absolute,默认就是处于相对Box的左上角(top:0;left:0;),如果你需要调整的话才需要重新设置。

全兼容方式的话,分三个部分构造
原结构  遮罩  文字
原结构使用position:relative;
遮罩和文字使用postion:absolute;
遮罩的透明度opacity根据自己需要去设置,注意IE和chrome/ff下的设置方式不同
遮罩的z-index可以设置为10,然后文字的设置为11
根据top和left调整文字的相对位置为合适

1楼正解

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Mar 04, 2025 pm 12:32 PM

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Mar 04, 2025 pm 02:39 PM

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Was ist der Zweck des & lt; Meter & gt; Element?

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Was ist der Zweck des & lt; datalist & gt; Element?

Was sind die Sicherheitsauswirkungen der Verwendung von IFRames und wie kann ich sie mildern? Was sind die Sicherheitsauswirkungen der Verwendung von IFRames und wie kann ich sie mildern? Mar 18, 2025 pm 02:51 PM

Was sind die Sicherheitsauswirkungen der Verwendung von IFRames und wie kann ich sie mildern?

See all articles