background简写之默认repeat不cover或contain

最新推荐文章于 2023-09-27 15:27:00 发布

原创最新推荐文章于 2023-09-27 15:27:00 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html-css

Html 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在CSS中使用简写形式设置背景图片的显示方式，包括cover和contain等属性，并通过实例展示了不同属性的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中使用background 的简写形式，默认是 repeat 的，图片重复来重复去，找了半天没发现怎么写 cover ，contain 等 css3 才出来的属性。无意中搞出来，于是记录一下：

background: url("http://p1.so.qhimg.com/dmfd/300_157_/t019490c6bf19fd5ee9.jpg") 0% 0% / cover;"

其实就是添加一个斜杠。新增的属性用斜杠区分。对比一下不同的情况：


<style>        
 .circleWrap {            
 display: inline-block;            
 border-radius: 50%;            
 text-align: center;            
 -webkit-text-size-adjust: none;            
 overflow: hidden;            
 width: 200px; height: 200px; 
 line-height: 200px;        
 }    

 </style> 
 <div class="content">


        <div class="circleWrap"
             style=" background: url(https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-04-09/63ffc0bd055a84717dbddf34428fb692.jpg)">
        </div>

        <div class="circleWrap"
             style=" background: url(https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-04-09/63ffc0bd055a84717dbddf34428fb692.jpg) 0% 0% / cover;">
        </div>


        <div class="circleWrap"
             style=" background: url(https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-04-09/63ffc0bd055a84717dbddf34428fb692.jpg) 0% 0% no-repeat/ contain;">
        </div>


    </div>