Question

我有一个三角形的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上看到，而不仅仅是在图像上，而不是我想要的。有没有办法让图像变暗？我知道过滤器css属性，但它们都没有实际使图像变暗。有没有办法实现它？

Answer 1

您可以执行以下操作：

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

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

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

Answer 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');
}

使png图像变暗

2 个答案: