怎么设置背景图片透明度

2019-09-07 郑州网站建设  

图片作为CSS配景时,若何设置后援图片无色度,让配景图片半通明。纯色后盾半透明对照简单,而图片相对属性要略微复杂些,考虑阅读器兼容和阅读器版本。

法子一:直接编纂图片

直接将图片在图片编辑软件中(比如PS)编辑出自身想要的半无色造诣。

法子二:哄骗CSS滤镜

filter设置装备摆设图片后援半无色成就,流弊为图片及文字都邑泛起半通明成效。

1、对应设置装备摆设半通明CSS代码:

filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60;

2、注解代码:

filter:alpha(opacity=50); /*支持 IE 阅读器*/
-moz-opacity:0.50; /*赞成 FireFox 涉猎器*/
opacity:0.50; /*支持 Chrome, Opera, Safari 等阅读器*/

3、实例HTML CSS代码

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>filter滤镜配置半无色效果 CSS5</title> <style> body{ font-size:16px} .book,.book-a{ border:2px solid #333} .book{ width:300px; height:100px; bac千克round:url(标志.gif)} .book-a{ width:300px; height:100px; filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60; bac公斤round:url(标志.gif)} </style> </head> <body> <div class="book">学习css在CSS5意图问题和学习不错</div> <div class="book-a">深造css在CSS5规划标题和进修不错</div> </body> </html>

以上代码可直接拷贝上来,保留HTML后,阅读器测试看看成就。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/985.html转载请标明出处,谢谢合作!
标签:
  • 设置
  • 图片
  • css
  • 如何
  • 背景图片
  • 透明度
  • 作为