Question

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

  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标签上放置颜色叠加层（仅用于图像）？

Answer 1

将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);
}

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

img标记上的颜色叠加，形状为

2 个答案: