HTML img 上的颜色叠加答案

【问题标题】：Color overlay over HTML imgHTML img 上的颜色叠加
【发布时间】：2016-09-02 15:32:34
【问题描述】：

我一直在为 HTML 图像设置样式 (<img>)。我找不到在图像上添加白色叠加层的方法。我一直在尝试这个 - CSS background image on top of <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%);
}

有什么方法可以添加叠加层吗？感谢您的帮助！

【问题讨论】：

你想在 img 上添加一个透明覆盖？
看看这个 jsFiddle jsfiddle.net/MoolsBytheway/s1t0tmev

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

您需要将图片设置为背景图片，然后才能应用叠加层。

在此处回答如何将叠加层应用于背景图像： Overlay a background-image with an rgba background-color

【讨论】：

【解决方案3】：

.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>

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

【讨论】：

【解决方案4】：

如果您可以重组 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>

【讨论】：

【解决方案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);
}

【讨论】：