如何将灰度应用于图像并添加文本

Question

任何人都可以帮助我，我希望图像变成灰度并添加一些文字并使图像的一半透明。下面是图像，想做的完全一样

Answer 1

您可以使用CSS添加灰度滤镜。

#yourImgID {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Answer 2

我不是100％确定你想要什么，但是在使用灰度滤镜后给你的图像叠加，你可以在CSS中做这样的事情：

#myImage::before { content: url(images/overlay-image.png); }

这会将叠加图像添加到现有图像的顶部;您可能需要使用“位置”进行微调，例如：

#myImage { position: relative; }

#myImage::before { 
content: url(images/overlay-image.png);
position: absolute; 
top: 0; bottom: 0; left: 0; right: 0; }

编辑：

您还可以在图像周围包裹div并执行以下操作：

CSS

.img-con {
    position: relative;
    display: inline-block;
    border: 4px dotted #000;
    background-color: #DDD;
}
.img-con img {
    vertical-align: top;
}
.img-con img:first-of-type {
    -webkit-filter: opacity(50%);
    /* opacity: 0.5; */
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}
.img-con img:last-of-type {
    -webkit-filter: grayscale(100%);
}

HTML

<div class="img-con">
<img src="#" alt="#" width="300" height="444" />
<img src="#" alt="#" width="300" height="444" />
</div>

看看

	.img-con {
	  position: relative;
	  display: inline-block;
	  border: 4px dotted #000;
	  background-color: #DDD;
	}
	.img-con img {
	  vertical-align: top;
	}
	.img-con img:first-of-type {
	  -webkit-filter: opacity(50%);
	  /* opacity: 0.5; */
	  position: absolute;
	  z-index: 1;
	  top: 0;
	  left: 0;
	}
	.img-con img:last-of-type {
	  -webkit-filter: grayscale(100%);
	}
	

<div class="img-con">
  <img src="http://www.mafab.hu/static/2014/265/14/2259_15.jpg" alt="#" width="300" height="444" />
  <img src="https://az620379.vo.msecnd.net/images/Contracts/small_894f7d50-8ea0-4d93-b114-75d4e79404a2.jpg" alt="#" width="300" height="444" />
</div>