我可以在同一属性中设置背景图像和不透明度吗？

的CSS CSS

神乐

2020-03-24

我可以在CSS参考中看到如何设置图像透明度以及如何设置背景图像。但是，如何将这两者结合以设置透明的背景图像？

我有一张要用作背景的图像，但是它太亮了-我想将不透明度降低到大约0.2。我怎样才能做到这一点？

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}

第3321篇《我可以在同一属性中设置背景图像和不透明度吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
伽罗理查德 2020.03.24

1 div和无透明图像的解决方案：

您可以使用多背景CSS3功能并放置两个背景：一个带有图像，另一个带有透明面板（因为我认为无法直接设置背景图像的不透明度）：

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

您不能使用rgba(255,255,255,0.5)它，因为仅在背面就可以接受它，因此在此示例中，我为每个浏览器使用了生成的渐变（这就是为什么它这么长）。但是概念如下：

background: tranparentColor, url("myImage");

http://jsfiddle.net/pBVsD/1/

伽罗理查德 2020.03.24

两种方法：

  1. 转换为PNG并使原始图像0.2不透明
  2. （更好的方法）有一个<div>是position: absolute;前#main和相同的高度#main，然后应用背景图像和opacity: 0.2; filter: alpha(opacity=20);。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android