内蒙古快三昨天开奖:css怎么设置背景图片半透明 css设置图片作为背景的透明度

图片作为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 内蒙古11选五开奖5号的代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>filter滤镜设置半透明效果 ThinkCSS</title>
<style>
body{ font-size:16px}
.book,.book-a{ border:2px solid #333}
.book{ width:300px; height:100px; background:url(logo.gif)}
.book-a{ width:300px; height:100px;
filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60; background:url(logo.gif)}
</style>
</head>
<body>
<div class="book">学习css在thinkcss解决问题和学习不错</div>
<div class="book-a">学习css在thinkcss解决问题和学习不错</div>
</body>
</html>

以上代码可直接拷贝下来,保存HTML后,浏览器测试看看效果。

4、效果截图

CSS滤镜实现半透明
CSS滤镜实现半透明

5、说明
优点直接对设置背景图片的DIV对象设置半透明滤镜,非常方便。
缺点,对象内文字内容、边框均跟随实现半透明。

方法三:纯颜色半透明遮挡【thinkcss强烈推荐】

此方法浏览器兼容性好,图片和内容都能很好分离实现背景图片半透明效果,而文字、边框等样式与内容不受影响。只是多了一层DIV,使用绝对定位样式来实现重叠层叠。

1、关键代码

1)、background:rgba(255,255,255,.4)
设置背景颜色值与透明度。前3个255为代表RGB黑色,.4代表透明度为40%

这个颜色值可以从PS软件获得。

PS软件获取背景颜色RGB数值
这里不再介绍,PS软件获取颜色,根据以上演示图可简单获得【PS获取RGB数值】

2)、绝对定位
position:relative、position:absolute; left:0; top:0;
设置绝对定位让文字DIV放到背景DIV上。

3)、完整实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景图片透明度设置实例_thinkcss</title>
<style>
.btmbox{ width:300px; height:100px; background:url(logo.gif)}
.btmbox-b{ width:300px; height:100px; background:url(logo.gif); position:relative}
.btmbox-b .qb{ position:absolute; left:0; top:0; width:100%; height:100%;background:rgba(255,255,255,.4);}
.btmbox-b .qc{ position:absolute; left:0; top:0; width:100%; height:100%;background:rgba(255,255,255,.8);}
</style>
</head>
<body>
<div class="btmbox">测试半透明案例内容文字</div>
<p>&nbsp;</p>
<div class="btmbox-b">
<div class="qb">测试半透明案例内容文字</div>
</div>

<p>&nbsp;</p>
<div class="btmbox-b">
<div class="qc">测试半透明案例内容文字</div>
</div>
</body>
</html>

4)、图片背景截图

实现背景图片半透明,文字字体不受影响
设置背景图片和文字层,用文字DIV背景纯色半透明实现遮挡后面背景图片实现图片半透明

相关标签: 图片 背景 半透明 透明度
如需转载,请注明文章出处和来源网址:www.thinkcss.com/wenti/1522.shtml

日期:2018-07-27 17:56:34 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:thinkcss原创

热门点击

  • 供应链如何更“智慧” 2019-06-17
  • 推动民营企业创新发展 2019-05-31
  • 【北京中汽双会车型报价】北京中汽双会4S店车型价格 2019-05-31
  • 弘扬光荣传统 勇立时代潮头 忠实履职尽责 2019-05-30
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-05-25
  • 阿呆,那是你家远祖啊,还不跪拜?[哈哈] 2019-05-15
  • 泰国推出“智慧签证”吸引人才 2019-05-15
  • “印象”世界杯:揭幕战红色风暴席卷绿茵场 2019-04-29
  • 衡阳日报社副社长周卫国祝贺人民日报创刊70周年 2019-04-27
  • 国乒在日本全面溃败!刘国梁却在参加综艺节目 2019-04-21
  • 张琳芃球衣事件折射中超不职业 因打亚冠要多道程序 2019-04-21
  • 出租广州市番禺区大龙街东兴路476号4楼物业空置部分 2019-04-17
  • 美媒盘点地球上最强5款战略核潜艇:毁灭世界比外卖都快 2019-04-17
  • 董卿白岩松朱广权 看看央视主持人大学就读啥院系 2019-04-16
  • 第十二届中国(南宁)国际园林博览会相约绿城冬季 2019-04-16