只在背景图像上设置rgba()

I have looked at this post which gave a clear description on how to set only the parent background image's opacity without affecting the children elements: HTML/CSS text background transparent but text not

我查看了这篇文章，它清楚地描述了如何在不影响孩子元素的情况下设置父背景图像的不透明度:HTML/CSS文本背景透明，但文本没有。

However, how do I set a background-image along with the opacity? Originally, I used opacity like this (but the children elements were affected too):

但是，如何设置背景图像和不透明度?最初，我使用的是这样的不透明度(但儿童元素也受到影响):

.content {
    background-image: url('link/url/image.jpeg');
    opacity: 0.35;
}

But after looking at the SO post linked above, I tried this:

但是看了上面的链接后，我试了一下:

.content {
    background-image: url('link/url/image.jpeg');
    background: rgba(255, 255, 255, 0.35);
}

But it seems like the background rgba() values aren't doing anything. I've also tried:

但似乎背景rgba()值什么也没做。我也试过:

.content {
    background: rgba(255, 255, 255, 0.35) url('link/url/image.jpeg');
}

But then the background isn't displayed.

但是背景没有显示出来。

2 个解决方案

#1

In your case the background-color can not be seen because the image goes on to color, and if it is not transparent does not display it.

在你的情况下，背景颜色是不能被看到的，因为图像会继续着色，如果它不是透明的，就不会显示它。

There is not currently an attribute that can be assigned a transparency only to the background-image.

目前还没有一个属性可以被分配到背景图像中。

If you want a transparent background-image without any kind of effect or transition in hover you can directly use an image in .png format saving it with a transparency.

如果您想要一个透明的背景图像，而不需要任何效果或转换，您可以直接使用.png格式的图像保存它，并具有透明度。

Otherwise you will need to create a container in "position: relative" and "overflow: hidden" with an internal image and another container in "position: absolute" with text or other inside. In this way you can assign transparency only to the image without affecting the rest also.

否则，您将需要在“位置:相对”和“溢出:隐藏”中创建一个容器，内部图像和另一个容器在“位置:绝对”与文本或其他内部。通过这种方式，您可以只将透明度分配给图像，而不影响其余部分。

#2

Try this out:

试试这个:

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

#1