CSS中背景图片透明度问题小结
青莳吖 发布时间：2024-06-25 16:14:22 作者：佚名 
我要评论
我要评论今天使用CSS设计一个后台页面，在插入背景图片后，设置透明度时，发现使用opacity设置透明度时，里面的文字内容也会随着背景一起变透明，今天给大家分享实例代码，感兴趣的彭一起看看吧
今天使用CSS设计一个后台页面，在插入背景图片后，设置透明度时，发现使用opacity设置透明度时，里面的文字内容也会随着背景一起变透明
效果如下图
于是在百度上找了很多方法，记录一下，方便以后使用
1.背景毛玻璃效果
通过伪类选择器before为背景添加透明效果，文字使用的仍时添加效果前的样式
.demo1{
width: 500px;
height: 300px;
line-height: 50px;
text-align: center;
}
.demo1:before{
background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
background-size: cover;
width: 500px;
height: 300px;
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;/*-1 可以当背景*/
-webkit-filter: blur(3px);
filter: blur(3px);
}
2.背景半透明效果
此方法通过在文字所在的div上面设置透明度，不改变背景的透明度
当两个盒子重叠时，就会实现下面图片的效果
.demo2-bg{
background: url("img/htbg1.jpg") no-repeat;
background-size: cover;
width: 500px;
height: 300px;
position: relative;
}
.demo2{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 500px;
height: 300px;
line-height: 50px;
text-align: center;
background:rgba(255,255,255,0.3);
}
到此这篇关于CSS中背景图片透明度问题的文章就介绍到这了,更多相关css背景图片透明度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- 使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即便重定义也没有用，不过有个方法可以实现，大家可以看看2014-10-17
- 这篇文章主要介绍了详解CSS-opacity子元素继承父元素透明度的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面2020-09-08
对于设置透明度，我们有两个可以选的css3属性：rgba 和 opacity。这篇文章主要介绍了详解css透明度之rgba和opacity的区别及兼容，感兴趣的可以一起跟随小编来了解一下2019-01-10- 这篇文章主要为大家详细介绍了CSS鼠标点击改变图片透明度，为大家提供改变图片css透明度属性的简单方法，感兴趣的小伙伴们可以参考一下2016-03-08
- 用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持，不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari2015-11-09
css中filter:alpha透明度使用小结兼容IE、火狐
使用Alpha可以设置透明度，FILTER:alpha在IE下是没有问题的，要支持firefox就需要使用-moz-opacity，下面有个不错的示例，大家可以参考下2014-03-27- CSS样式设置元素的透明度的方法有很多，不过兼容各种浏览器就屈指可数了，下面以将透明度设置为50%举例，向大家介绍下，感兴趣的朋友不要错过2013-10-12
- CSS 图像透明度opacity想必大家并不陌生吧，使其可以让图片或者页面拥有透明效果，下面为大家讲解下CSS opacity的使用及其兼容性，感兴趣的朋友可以参考下2013-09-08
- 一款使用CSS的Alpha透明度实现的图片链接效果，鼠标放上后图片会变为半透明，然后出现文字介绍，+可以加入其它功能，一般是加入收藏，根据你的需要了，可以自己改2011-12-20
最新评论