html div背景半透,css半透明背景实现方法

这里博主介绍2种办法。

第一种用背景图的方式：

代码如下html>

半透明实例-琅枫个人博客

.div1{width:300px; height:200px; background:url(http://www.phpfeng.cn/statics/assets/i/b1.jpg);}

.div2{width:300px; height:50px; background:rgba(0,0,0,0.5); color:#fff;}

DIV半透明实例演示

效果图如下

第二种用opacity了；

代码如下：html>

半透明实例-琅枫个人博客

.div1{width:300px; height:200px; background:url(http://www.phpfeng.cn/statics/assets/i/b1.jpg);}

.div2{width:300px; height:50px; filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6; color:#fff; background:#000;}

DIV半透明实例演示

效果图如下：

注：filter:alpha(Opacity=60);是为了兼容IE，-moz-opacity是为了火狐浏览器实现半透明，opacity则是谷歌了。

还有一点是opacity会影响到文字的透明度，所以想要背景透明而文字不透明则用第一种。

本文出自：琅枫个人博客。如需转载请注明出处！

本文出处："https://www.phpfeng.cn/learn/web/127.html"

html div背景半透,css半透明背景实现方法相关推荐

php背景图片透明度,css实现背景图片半透明内容不透明代码分享
本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的 ...
Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
css背景图毛玻璃,css实现背景图片的毛玻璃效果
问题一css 一.简述问题html 最近在作登陆页面的时候,遇到了一个问题:将登陆页面的背景图片,设置为毛玻璃效果.在网上找到了关于这方面的资料.web 二.问题解决svg .blur { filte ...
html背景置顶,css设置背景图片位置固定
先看下实例html> css背景图片固定 body{ background-image: url("https://picsum.photos/id/100/1080/1400&quo ...
css怎样让背景图片居中,CSS让背景图片居中显示的方法
当我们的背景图片写成: background: url("images/titleborder.png") no-repeat; 时,表示背景图片不重复,位置会默认为在div中居于 ...
css怎么恢复清背景,常用的CSS中背景background使用技巧
css教程说明 background-image:url("图片的网址"); 背景图 background: url(" 图片的网址 "); 背景 ba ...
CSS实现背景透明而背景上的文字不透明
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
CSS -- CSS背景设置总结（纯色背景、背景图片）
文章目录 CSS的背景 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景设置总结 CSS的背景通过 CSS 背景 ...
html背景图片横屏,CSS背景颜色背景图片居中重复固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...

html div背景半透,css半透明背景实现方法

html div背景半透,css半透明背景实现方法相关推荐

最新文章

热门文章