请问这个CSS效果如何实现

lznism

20912955

发布于
2020-02-26

WX20200226-214354@2x.png

数字0后面有块背景，背景的宽度根据数字的宽度自适应，左右多出的宽度是28px，求大佬指点

前端 css html css3 javascript

阅读 2.5k

3 个回答

得票最新

joy钰

9.1k53031

发布于
2020-02-26

✓ 已被采纳

.number {
    background: linear-gradient(transparent 60%, #e9f9ff 60%);
    padding: 0 28px;
}

或者可以拿张纯色图片作为背景。。

lpe234

4.1k3930

发布于
2020-02-26

后端来凑数。
Chrome没问题，其他的不能保证。

<!DOCTYPE html\>  
<html lang\="en"\>  
<head>  
 <meta charset\="UTF-8"\>  
 <title>Title</title>  
 <style> 
    #num {  
      font-size: 4em;  
      width: fit-content;  
      margin: 0 auto;  
    }  

    #num-bg {  
      height: 0.5em;  
      background-color: #4078c0;  
      position: relative;  
      bottom: 0.6em;  
      margin-left: -0.2em;  
      margin-right: -0.2em;  
      z-index: -1;  
    }
 </style>  
</head>  
<body>  
  <div>  
    <div id\="num"\>  
      42356123  
      <div id\="num-bg"\></div>  
    </div>
 </div>  
</body>  
</html>