一文带你了解CSSOpacity（透明度）_0

时间：2023-03-12 07:21:33 科技观察

opacityCSS属性指定元素的透明度。opacity属性指定元素的透明度。换句话说，不透明度属性指定元素后面的背景被覆盖的程度。1.跨浏览器透明度现在，透明度（opacity）是CSS3规范的一部分，但它已经存在了很长时间。但是，较旧的浏览器有不同的方式来指定不透明度或透明度。2.Firefox、Safari、Chrome、Opera和IE9中的CSSOpacity当前浏览器中CSSopacity的最新语法。示例CSS透明度示例

此文本为70%不透明（或30%透明）。调整opacity值，看看它是如何工作的

这个文本是70%不透明（或30%透明）。调整不透明度值，看看它是如何解析的：上面的样式规则将使段落元素70%不透明（或30%透明）。opacity属性的取值范围是0.0到1.0。将其设置为不透明度：？1；将使元素完全不透明（即0%透明），并且opacity:?0;将使元素完全透明（即100%透明）。InternetExplorer8和更早版本中的CSS透明度实现InternetExplorer8和更早版本支持Microsoft独有的属性“alphafilter”来指定元素的透明度。示例注意：IE中的Alpha过滤器接受从0到100的值。0值使元素完全透明（即100%透明），而100值使元素完全透明元素完全不透明（即0%透明）。3.兼容所有浏览器的CSS透明度示例：p{opacity:0.5;/*现代浏览器的不透明度*/filter:alpha(opacity=50);/*IE8及更低版本的不透明度*/zoom:1;/*针对IE7的修复*/}警告：在InternetExplorer8和更早版本中包含用于指定透明度的alpha过滤器，因为这是Microsoft独有的属性，而不是标准的CSS属性，将在样式表中创建无效代码。1.CSSImageTransparency你也可以使用CSSOpacity来制作透明图片。下图中的三个图像都来自同一个源图像。它们之间的唯一区别是它们的透明度。项目目标

不透明度：1

不透明度：0.5

opacity:0.25

运行效果：2.当透明框中的文字对元素使用opacity时，不仅元素的背景会有transparency，而且它的所有子元素也会变得透明。较高的不透明度值会使透明元素内的文本难以阅读。示例：div{float:left;不透明度：0.7；border:1pxsolid#949781;}p{float:left;位置：相对；margin-left:-400px;}为防止出现这种情况，请使用透明的PNG图像，也可以将文本块放在透明框外，然后使用负边距或CSS定位在视觉上将其推入内部。4.小结本文在CSS的基础上，介绍了CSSOpacity如何改变图片的透明度，以及在不同的浏览器中如何改变图片的透明度。浏览器的兼容性，改变透明框内的文字，都通过案例分析进行了详细的讲解。欢迎大家积极尝试。有时候看别人实现很简单，但是到了自己实现的时候，总会出现各种各样的问题。不要野心太大，努力理解得更深刻。代码很简单，希望能帮助大家更好的学习。本文转载自微信公众号《前端进阶学习交流》，可通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。