变暗 png 图像答案

【问题标题】：Darken png image变暗 png 图像
【发布时间】：2016-05-19 19:59:28
【问题描述】：

我有一个三角形的 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;
}

cover_photo 已将 img 设置为背景，但使用它，覆盖的颜色将在整个 div 上看到，而不仅仅是在图像上，这不是我想要的。有没有办法使图像变暗？我知道 filter css 属性，但它们都没有真正使图像变暗。有什么方法可以实现吗？

【问题讨论】：

filter 属性不适用于所有浏览器。你试过-webkit-filter: brightness(0.5)吗？
stackoverflow.com/questions/15765550/… 的可能重复项
filter, opacity, mix-blend-mode, filter + svg , ... 可以使用许多方法，但我们不知道您的 png 的颜色和不透明度，也不知道 css 的设计围绕它采取行动，你会得到猜测作为答案:)
@AustinKilduff 是否可以仅使用其中一张背景图像的亮度？我现在正在使用两个，但希望亮度只影响第一个。

标签： css

【解决方案1】：

你可以这样做：

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

这基本上是将底部边框设置为非常胖，然后用透明的border-left 和border-right 道具修剪两侧。您可能还可以添加边框半径属性来获得圆角，但我还没有尝试过。

使用位图编辑器或其他工具将其变暗可能会更容易。或者，如果您希望进行动态（或自动化）处理，请查看imagemagick

【讨论】：

【解决方案2】：

您可以将linear-gradient 应用于图像。由于您实际上并不想要渐变，只需将渐变的两个值设置为相等即可。这是我所说的一个例子：

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

【讨论】：

这将为 div 中的整个空间添加渐变，而不仅仅是在图像上