使背景图像透明而不改变div的其余部分

Question

我有一个背景颜色和背景图像的div。 div调用这个类：

.cakebg {
  background-color: #F8BBD0;
  background-image: url(img/cake.png);
  background-size: 25%;
  background-position: right top;
  background-repeat: no-repeat;
}

我试图使图像有点透明。 我试过这个：

.cakebg {
  background-color: #F8BBD0;
  background-image: url(img/cake.png);
  opacity: 0.6;
  background-size: 25%;
  background-position: right top;
  background-repeat: no-repeat;
}

但这使整个div透明化。

所以我尝试了这个：

.cakebg {
  background-color: #F8BBD0;
  background-image: url(img/cake.png) opacity(0.6);
  background-size: 25%;
  background-position: right top;
  background-repeat: no-repeat;
}

但这使得图像完全消失。 可以这样做吗？

Answer 1

你想要在这个单一元素上做什么是不可能的，但是有很多方法可以用很少的额外努力做同样的事情。 可能最好的方法是向.cakebg元素添加一个额外的子元素，该元素具有仅具有背景图像的相同尺寸，具有不透明度。 如：

.cakebg .child-element {
  height: 100%;
  width: 100%;
  background-image: url(img/cake.png);
  opacity: 0.6;
}

如果您试图保持标记清洁，您甚至可以将其添加为伪元素。 如下：

.cakebg:after {
  content: "";
  height: 100%;
  width: 100%;
  background-image: url(img/cake.png);
  opacity: 0.6;
}

如果这两种方法都不起作用，最后一种方法是编辑图像，以便从您喜欢的编辑软件中烘焙出不透明度。 希望其中一些方法可能有所帮助！

Answer 2

没有CSS属性background-opacity，但你可以通过插入一个具有常规不透明度的伪元素来伪造它，后面是元素的确切大小。

.cakebg {
 background-color: #F8BBD0;
 background-size: 25%;
 position: relative;
}

.cakebg::after {
  content: "";
  background: url(img/cake.png);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

或者你可以简单地使用trasparent png图像作为背景

Answer 3

没有CSS属性可以使背景透明，但你可以通过在其后面插入一个具有相同大小元素的伪元素来伪造它并改变它的不透明度。

.cakebg {
    background-color: #F8BBD0;
    background-size: 25%;
    background-position: right top;
    background-repeat: no-repeat;
}

.cakebg::after {
    content: "";
    background-image: url(img/cake.png);
    opacity: 0.5;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1;
}

请注意，这个问题已经经常被问到，例如在这里阅读 。