3

如何正确设置下一个背景不透明度：

<body style="background-image: url(images/background.jpg); background-color: white;
 background-position: center center; background-size: 100%; 
 background-repeat: no-repeat">

我尝试：

background-opacity: 0.5;

但是失败。

它应该是这样的：

background-image: url(images/background.jpg) opacity: 0.5;

甚至，

opacity: .4;

不影响图像，但影响文本和整个身体。

不接受带有 div 的解决方案。

我的网页：http ://shell.bshel​​lz.net/~panzerdivision/

浏览器：火狐和chrome

4

4 回答 4

2

使用opacity属性，改变元素本身的不透明度。

要获得透明background-color，您可以rgba()改为使用背景颜色：

background-color: rgba(255, 255, 255, .5);

或简写：

background: rgba(255, 255, 255, .5) url(path/to/transparent/background.png) center center no-repeat;

但是如果你需要一个透明的背景图片，图片本身应该是透明的。

顺便说一句，这是一个不透明的解决方案，background-image但我不确定在这种情况下是否有用。

于 2013-08-28T12:51:39.310 回答
0

您不能使用 CSS 设置元素的整个背景的不透明度。

  • 您可以设置整个元素的不透明度（使用opacity属性）。
  • 您可以设置背景颜色的不透明度（使用rgba颜色：background-color: rgba(50%, 50%, 50%, 0.5);）

如果你想要一个半透明的背景图像，你必须对图像本身的不透明度进行编码（使用支持这一点的 PNG 或 WebP 图像格式）。

于 2013-08-28T12:52:25.810 回答
0

使用以下代码并根据需要调整宽度

<p><img style="opacity:0.9;" src="C:\Users\Desktop\images.jpg" width="300" height="231" alt="Image" /></p>
于 2015-09-01T23:03:48.730 回答
0

来自https://css-tricks.com/maybe-there-kinda-is-background-opacity/

.el {
  background-image: -webkit-cross-fade(
    url(image.jpg),
    url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7),
    50%
  );

通过使用透明的 base64 url​​ 编码的 gif 淡化图像，您可以到达多年前想要的位置。:)

目前不适用于 Firefox。:(

于 2021-12-16T04:20:42.503 回答