Css 变暗png图像

我有一个png图像是三角形的，我需要这个图像更暗，我用另一个不透明度为0.5的div来完成这项工作

<div class ="cover_photo">
  <div class ="overlay"></div>
</div>

  .overlay {
    background-color: #322D36 ;
     bottom: 0;
     left: 0;
     opacity: 0.5;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 1;
}

.覆盖{
背景色：#322D36；
底部：0；
左：0；
不透明度：0.5；
位置：绝对位置；
右：0；
排名：0；
z指数：1；
}

---

封面照片说img设置为背景，但使用这个，覆盖的颜色将在整个div上看到，而不仅仅是在图像上，这不是我想要的。有没有办法使图像变暗？我知道过滤器css属性，但没有一个会使图像变暗。三种方法都可以实现吗？

您可以采取以下措施：

.red-triangle {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

这基本上是将底部边框设置为非常胖，然后使用透明的

左边框

和

右边框

道具修剪侧面。您可能还可以添加边界半径属性以获得圆角，但我还没有尝试过这种方法

---

使用位图编辑器或其他东西使其变暗可能更容易。或者，如果您希望进行动态（或自动）处理，请查看，您可以执行以下操作：

.red-triangle {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

这基本上是将底部边框设置为非常胖，然后使用透明的

左边框

和

右边框

道具修剪侧面。您可能还可以添加边界半径属性以获得圆角，但我还没有尝试过这种方法

---

使用位图编辑器或其他东西使其变暗可能更容易。或者，如果您希望进行动态（或自动）处理，请查看，您可以对图像应用

线性渐变。因为你们实际上不需要渐变，所以只需将渐变的两个值设置为相等即可。下面是我所说的一个例子：

background:
    /* gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),
    /* image */
    url('Add a URL here');
}

您可以对图像应用
线性渐变。因为你们实际上不需要渐变，所以只需将渐变的两个值设置为相等即可。下面是我所说的一个例子：

background:
    /* gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),
    /* image */
    url('Add a URL here');
}

filter
属性在所有浏览器中都不起作用。您是否尝试过使用
-webkit过滤器：亮度（0.5）
？过滤器、不透明度、混合混合模式、过滤器+svg等的可能重复项。。。可以使用很多方法，但我们不知道png的颜色和不透明度，也不知道css，围绕它的设计。答案是猜测：）@AustinKilduff是否可以只使用一个背景图像？我现在正在使用两个，但希望亮度只影响第一个。
filter
属性不适用于所有浏览器。您是否尝试过使用
-webkit过滤器：亮度（0.5）
？过滤器、不透明度、混合混合模式、过滤器+svg等的可能重复项。。。可以使用很多方法，但我们不知道png的颜色和不透明度，也不知道css，围绕它的设计。答案是猜测：）@AustinKilduff是否可以只使用一个背景图像？我现在正在使用两个，但希望亮度只影响第一个。这将在div中为整个空间添加渐变，而不仅仅是在图像上。这将在div中为整个空间添加渐变，而不仅仅是在图像上