手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2023年12月10日的文章

CSS如何给文字加上文字一半高度的背景色

 一般来说象这种效果实现还是比较有意思的

在文字下层加上一定高度的背景色,半透明,而且模糊。。。
 
话不多说,上代码:
CSS代码
  1. .text_bg {  
  2.   displayinline-block;  
  3.   positionrelative;  
  4.   z-index: 1;  
  5. }  
  6.   
  7. .text_bg::after {  
  8.   content'';  
  9.   positionabsolute;  
  10.   bottom: 0;  
  11.   left: 0;  
  12.   width: 100%;  
  13.   height: 40%;  
  14.   background-color#B6D16F;  
  15.   opacity: .7;  
  16.   z-index: -1;  
  17.   filter: blur(1px); /* 可选:模糊效果 */  
  18. }  
上述代码中最重要的其实就是那两个z-index。否则你会发现背景色其实压在了文字上方。
其他的基本上都是基本操作,只是额外用了一个:after的伪类。在当前这个例子里。用before和after的最终显示效果其实是一样的