内蒙古11选5预测软件: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-08-19
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-08-13
  • 我们是建立市场经济,公有制如何建立市场经济,就要明晰产权,不明晰产权如何建立市场经济? 2019-08-13
  • 2017巴塞尔国际钟表珠宝展 2019-08-11
  • 政务舆情回应如何把握语言分寸感? 2019-08-11
  • 候选案例:机井通电惠民生 2019-08-08
  • 2018年04期 中国国家地理网 2019-08-05
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-07-31
  • 西安外国语大学第二十四届校园文化艺术节闭幕式暨第一届朗读者圆满落幕西安外国语大学第二十四届校园文化艺术节-陕西教育新闻 2019-07-31
  • 俄罗斯世界杯今日开战,送上最全观赛指南!你最看好哪支球队? 2019-07-29
  • 《人民日报》让我爱上了文学(原创首发) 2019-07-29
  • 【北京页川车型报价】北京页川4S店车型价格 2019-07-27
  • 河北沧州经济开发区管理委员会 2019-07-24
  • 强村带弱村结对共发展 2019-07-24
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 元角分厘模式大平台时时彩 快3手机助手下载 上海天天彩选4开奖 北京快三助手软件下载 一肖中特免费公开资料马会 赌场风云国语 安徽11选5彩经网 2018生肖表排码表图 彩票合买平台骗局 pt电子游戏公司 11选5澳客网怎么样 百度青海快3开奖结果 体彩七位数第14007期中奖号码 炸金花的技巧 湖北30选5基本走势图