CSS:怎么样给背景图加透明度 opacity ?

方法一

CSS 中无法直接给背景图片加 opacity 属性,可以使用下面的方法绕过这个限制:

div {
 width: 200px;
 height: 200px;
 display: block;
 position: relative;
 }

div::after {
 content: "";
 background: url(image.jpg);
 opacity: 0.5;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 position: absolute;
 z-index: -1;
 }

方法二

嵌套一个div浮在图片上面,并设置透明度

body{
background: url("assets/i/bg.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
}
.body_box{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(-160deg, rgba(57,214,239,.8) 0%,rgba(163,103,207,.8) 50%,rgba(248,24,122,.8) 100%) no-repeat;
}

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » CSS:怎么样给背景图加透明度 opacity ?

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. 写的很好,支持一下