简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

CSS如何设置div半透明效果_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-24 11:31:20
Original
1273 Leute haben es durchsucht

CSS如何设置div半透明效果:
设置元素的透明度在很多应用中都有使用，下面就介绍一下如何设置一个元素为半透明，其他的透明效果自己衍伸就可以了。
代码实例如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div{   filter:alpha(opacity=50);    opacity:0.5;   width:100px;  height:100px;  background-color:green;} </style></head><body><div></div></body></html>
Nach dem Login kopieren

 

opacity属性所以标准浏览器都支持，但是IE8和IE8以下浏览器不支持此属性，于是就使用filter:alpha(opacity=50)进行兼容，opacity的取值是0-1,但是filter下的那个取值是0-100。opacity属性可以参阅CSS的opacity属性一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9651

更多内容可以参阅:http://www.softwhy.com/divcss/

 

Verwandte Etiketten：
CSS如何设置div半透明效果
Quelle：php.cn
Vorheriger Artikel：设置TinyMCE在线HTML编辑控件只读_html/css_WEB-ITnose Nächster Artikel：项目中最常用到的颜色_html/css_WEB-ITnose
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
Neueste Artikel des Autors
Aktuelle Ausgaben
So verwenden Sie transparentes Div, um einen Seitenhintergrundunschärfeeffekt zu erzielen Ich habe Code für eine Webseite, auf der ich den Hintergrund über ein transparentes Div ve...
Aus 2023-09-14 21:09:28
0
1
164
Wie wende ich Transparenz in CSS-Farbvariablen an? Ich entwerfe eine App in Electron, damit ich auf CSS-Variablen zugreifen kann. Ich habe ei...
Aus 2023-08-20 18:51:07
0
1
184
Lassen Sie die CSS-Animation am Ende im Endzustand Ich führe Animationen für einige Elemente aus, die in CSS auf opacity:0; gesetzt sind. Auf...
Aus 2023-08-20 18:36:55
0
2
326
javascript - Wie kann ich Komponenten vollständig ausblenden, ohne sie durchscheinen zu lassen? Jetzt gibt es im Viewer einen durchscheinenden Effekt, um eine ausgeblendete Komponente da...
Aus 2017-07-05 10:49:53
0
1
786
android – So platzieren Sie Bilder am Rand zweier Layouts Wie im Bild gezeigt, wie man einen solchen Effekt einrichtet, befindet sich das Bild am Ra...
Aus 2017-05-16 13:34:07
0
2
628
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！