在 HTML img 上添加颜色叠加层

Question

我被困在美化HTML图片(<img>)方面。我找不到一种在图片上添加白色叠加层的方法。 我尝试过这个链接 - CSS背景图片覆盖<img> （无效）。

HTML

<img class="default-user" src="https://minotar.net/helm/Steve/16.png">

CSS

.default-user {
    position: absolute;
    outline: #e8e8e8 solid 1px;
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
}

有没有办法添加覆盖层？感谢您的帮助！

- Berisko

---

你想在图片上添加一个透明的覆盖层吗？ - moolsbytheway

看一下这个 jsFiddle https://jsfiddle.net/MoolsBytheway/s1t0tmev/ - moolsbytheway

Answer 1

试试这个jsFiddle

.default-user {
    position: absolute;
    outline: #e8e8e8 solid 1px;
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
    width:150px;height:150px;
}
    
#overlay {
    padding:10px;
    position:absolute;
    background-color:white;
    opacity:0.5;    /* -> transparency 50% */
    height:130px;   /* -> image_height - padding */
    width:130px;    /* -> image_width - padding */
    z-index:1;      /* -> put overlay over image */
}

<div class=container>
    <div id=overlay>Overlay text</div>
    <img class="default-user" src="https://minotar.net/helm/Steve/16.png">
</div>

- moolsbytheway

Answer 2

你需要将图片设置为背景图片，然后可以应用叠加效果。

如何将叠加效果应用于背景图片，请参见以下链接： 使用rgba背景颜色叠加背景图片

- TFFX

Answer 3

如果您可以重新构建HTML，应该将img包含在div中，这样您就可以使用:after伪元素。为其应用一些背景样式，它将整齐地位于图像顶部（且您的图像可以是任何大小，而且您不需要在CSS中指定大小）。

.default-user {
  display: inline-block;
  position: relative;
}
.default-user:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.7);
}

<div class="default-user">
  <img src="https://placekitten.com/200/300">
</div>

- ksav

Answer 4

.default-user {
 height: 280px;
 width: 280px;
 overflow: hidden;
 position: absolute;
    background: linear-gradient(#000    0%, #fff 100%);
}

<div class="grad">
  <img class="default-user"                src="http://i1.wp.com/freepngimages.com/wp-content/uploads/2015/10/cobra-snake-transparent-image.png?resize=624%2C557"     width="300px" height="300px">
 </div>

我注意到渐变不会显示在你的图像上，因为你的图像背景不是透明的。

- Ricky

Answer 5

请尝试这段代码。

<div class="image"></div>

.image {
width: 300px;
height: 200px;


background: 
 /* top, transparent red *
linear-gradient( 
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45),
),
/* bottom, image */ 
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

- Razia sultana