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>

效果：

https://thimbleprojects.org/mingyueyixi/438531/page/bg-simple/index.html