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