教你玩转CSS 图像透明/不透明

举报
孙叫兽 发表于 2021/03/29 02:14:14 2021/03/29
【摘要】 目录 图像的透明度 - 悬停效果 透明的盒子中的文字 使用CSS很容易创建透明的图像。 注意:CSS Opacity属性是W3C的CSS3建议的一部分。 img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(o...

目录

图像的透明度 - 悬停效果

透明的盒子中的文字


使用CSS很容易创建透明的图像。

注意:CSS Opacity属性是W3C的CSS3建议的一部分。


  
  1. img
  2. {
  3. opacity:0.4;
  4. filter:alpha(opacity=40); /* IE8 及其更早版本 */
  5. }
  6. img:hover
  7. {
  8. opacity:1.0;
  9. filter:alpha(opacity=100); /* IE8 及其更早版本 */
  10. }

IE9,Firefox,Chrome,Opera,和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小,使得元素更加透明。

IE8和早期版本使用滤镜:alpha(opacity= x)。 x可以采取的值是从0 - 100。较低的值,使得元素更加透明。

图像的透明度 - 悬停效果

文章来源: sunmenglei.blog.csdn.net,作者:孙叫兽,版权归原作者所有,如需转载,请联系作者。

原文链接:sunmenglei.blog.csdn.net/article/details/107525960

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。