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

Posted 2023-03-06

【中文标题】使背景图像透明而不更改 div 的其余部分

【英文标题】：Making a background image transparent without changing the rest of the div

【发布时间】：2016-09-27 20:36:14

【问题描述】：

我有一个带有背景颜色和背景图片的 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;

但这会使图像完全消失。这个可以吗？

【问题讨论】：

你能制作一张图片来说明你的意思吗？

能否请您发布一个小提琴，以便我们对其进行测试并尝试提供帮助。

如果您想让图像透明，那么编辑图像本身不是一个更好的主意吗？

【参考方案1】：

没有 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;

请注意，这个问题已经被经常问到，例如read here。

【参考方案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;   

或者您可以简单地使用透明的 png 图像作为背景

【参考方案3】：

您尝试对单个元素执行的操作是不可能的，但是有很多方法可以用很少的额外努力就可以完成相同的操作。可能最好的方法是向.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;

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