带有形状的 img 标签上的颜色叠加答案

【问题标题】：Color overlay on img tag with shape带有形状的 img 标签上的颜色叠加
【发布时间】：2017-11-13 14:06:55
【问题描述】：

我有一个带有边框半径的图像，并且想在图像上添加一个颜色叠加层。

  img {
    border-bottom-left-radius: 60% 65%;
    border-bottom-right-radius: 35%;
    border-top-left-radius: 40px 200px;
    }

<div class="image-wrapper">
<img width="751" height="640" src="http://via.placeholder.com/751x640" class="" alt="">
</div>

图片是椭圆形的，有边框半径

如果我在 div/容器上添加带有伪元素的颜色，它不会以椭圆形覆盖，而是以完整的容器覆盖。

如何在具有边框半径的 img 标签上放置颜色叠加层（仅用于图像）？

【问题讨论】：

您能否提供一个最终结果的示例，并解释一下您所说的 overlay 是什么意思？您可能还想查看CSS filters。

标签： html css

【解决方案1】：

如果您想使用伪，则容器必须缩小图像并将图像显示为块或垂直对齐重置以避免间隙。从那里，应用到伪相同的半径。甚至可以使用渐变叠加 ;)

示例：https://codepen.io/anon/pen/qVjdbg

img,
.image-wrapper:before {
  display: block;
  border-bottom-left-radius: 60% 65%;
  border-bottom-right-radius: 35%;
  border-top-left-radius: 40px 200px;
}

.image-wrapper {
  position: relative;
  display: table;
}

.image-wrapper:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(45deg, rgba(200, 45, 125, 0.3), rgba(15, 235, 15, 0.5));
}

&lt;div class="image-wrapper"&gt;&lt;img width="751" height="640" src="http://via.placeholder.com/751x640" class="" alt=""&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

将border-radius放在带有overflow: hidden的父元素上，然后添加你的叠加效果：

.image-wrapper {
    display: inline-block;
    position: relative;
    border-bottom-left-radius: 60% 65%;
    border-bottom-right-radius: 35%;
    border-top-left-radius: 40px 200px;
    overflow: hidden;
}

.image-wrapper::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 128, 255, 0.5);
}

【讨论】：