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 ?
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注
  • 写的很好,支持一下
  • U乐娱乐注册