css中怎么遮住图片显示文字

CSS中怎么遮住图片显示文字
在网站设计中，有时候需要在图片上显示文字，但是又不能完全遮住图片，这时候就需要用到CSS的技巧：如何遮住图片显示文字。
一、使用position和z-index属性
在CSS中，我们可以使用position属性来设置元素的定位方式，z-index属性来设置元素的层级关系。因此，我们可以给图片和文字分别设置固定的position和z-index值，从而实现文字遮盖在图片上方。
如下代码：

img {
  position: relative;
  z-index: 1;
}
p {
  position: absolute;
  z-index: 2;
} 

在这个例子中，我们给图片和文字分别设置了不同的z-index值，图片的z-index为1，文字的z-index为2，这样就可以遮住图片显示文字。
二、使用opacity属性
另外，我们也可以使用CSS的opacity属性来实现遮住图片显示文字的效果。opacity属性可以控制元素的透明度，当设置为0时，元素将完全透明，不显示在页面上。
如下代码：

img {
  opacity: 0.5;
}
p {
  position: absolute;
  z-index: 1;
} 

在这个例子中，我们给图片设置了opacity属性，将图片的透明度设置为0.5，这样图片就被半透明遮住了。然后给文字设置position和z-index属性，让它遮住图片，显示在页面上。
总之，CSS可以实现遮住图片显示文字的效果，我们可以根据需求选择不同的方法来实现图片和文字的组合效果，从而提高页面的美感和功能性。