Question

我坚持设计HTML图像（）。我找不到在图像上添加白色叠加层的方法。我一直在尝试这个 - 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%);
}

有没有办法添加叠加层？谢谢你的帮助！

Answer 1

试试这个jsFiddle

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

如果您可以重构html，则应将img包裹在div中，以便使用:after伪造元素。应用一些背景样式，它应该整齐地放在你的图像上（你的图像可以是任何大小，你不必在任何地方指定css的大小。）

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

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

HTML img

5 个答案: