Hot For Coding

CSS样式的透明效果实现

早之前,要实现透明效果是非常麻烦的一件事,要用gif图片代替。

现在,只需要在CSS里声明一段话即可实现透明效果

还可以修改值来实现透明程度

img {
  opacity: .5; /* 兼容 Standard: 火狐 1.5 以上, Opera, Safari */
  filter: alpha(opacity=5); /* 兼容 IE8 以下 */
  -ms-filter: "alpha(opacity=5)"; /* 兼容 IE 8 */
  -khtml-opacity: .5; /* Safari 1.x */
  -moz-opacity: .5; /* 火狐 1.5 以下, Netscape */
}

值越小越透明,点的前面可以加零也可以不加。

opacity还是有一些不太便利,比如以下例子

<div style="opacity: 0.5">
  <span>This is text</span>
</div>

div标签由于添加了opacity属性,所以它包含的所有子标签都会受影响,如果希望子标签不受影响可以使用rgba,如

<div style="background-color: rgba(233,233,0,0.5);">
  <span>This is text</span>
</div>

以上例子中,透明属性只会应用于div标签的background-color背景颜色属性,不会影响其它

分享

TITLE: CSS样式的透明效果实现

LINK: https://www.qttc.net/68-css-opacity.html

NOTE: 原创内容,转载请注明出自琼台博客