关于CSS中背景图片透明度问题

今天使用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);
}![在这里插入图片描述](https://img-blog.csdnimg.cn/1bf929c3b0b44f1687a4caa82e3770ca.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6I6z5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16)

关于CSS中背景图片透明度问题相关推荐

php背景图片存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...
html里如何定位背景图片,Html+Css CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
网站图片定位代码html5,CSS中背景图片的定位
在CSS中,背景图片的定位方位有3种: (1)关键字:background-position: top right; (2)像素:background-position: 0px 0px; (3)百分 ...
css中背景图片路径问题
1.不要给背景图片路径加引号将background:url("xxx.gif")改为background:url(xxx.gif) 因为对于部分浏览器加引号反而会引起错误. 2. ...
webpack如何设置html中img路径和css中背景图片路径区别开
在使用webpack过程中,打包后发现html中img路径是: <img src="img/01.jpg" alt="标题图片" /> 但是在mai ...
css中背景图片图片不能自适应解决方法
Background-size的属性值 background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || ...
css怎么分开背景图片,css切背景图片（background-position）
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .all_bg { background: url(../imag ...
vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .welcome { width: 420px; height: ...
html背景透明图片不透明,css中背景透明的图片不透明怎么解决
css中背景透明的图片不透明怎么解决一.使用滤镜解决img { background: transparent; -ms-filter: "progid:DXImageTransform. ...

关于CSS中背景图片透明度问题

关于CSS中背景图片透明度问题相关推荐

最新文章

热门文章