css3 图片变暗显示字

CSS3中有一种很酷的效果，可以实现图片变暗显示字的效果，这样的效果在一些网站中经常使用。下面我们来看一下这个效果的实现方法。

首先，我们需要使用CSS3的滤镜功能来实现图片变暗。具体实现方法如下：

 img {
   filter: brightness(50%);
 }

上面的代码中使用了CSS3的brightness()滤镜属性，数值越小，图片就越暗。

接下来，我们需要在这个图片上覆盖一层半透明的背景。具体实现如下：

 .img-container:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0.5);
 }

上面的代码中使用了伪元素:before来实现在图片上添加背景层，rgba(0,0.5)表示半透明黑色背景。

最后，我们需要在背景层上添加文字，实现变暗图片上显示字的效果。具体实现如下：

 .text {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   color: #fff;
   font-size: 30px;
   z-index: 1;
 }

上面的代码中，我们使用了绝对定位将文字放置在背景层上，并使用transform来居中。同时，z-index为1，确保文字在图片和背景层之上。

综上，通过CSS3的滤镜和伪元素:before，我们可以实现图片变暗，并在其上方显示字的效果，效果非常酷炫。