复合属性

字数: 0 字 时长: 0 分钟

<div 
style="
background:url(../../../../images/CD.png);
background-size:100% 100%;
height:100px;
width:150px">
</div>

使用 background 与 background-images 属性作背景图效果都一样，这里控制台看到background 右边有个小三角箭头，代表复合属性。 实际上 background 可以设置

.example {
    background: #f0f0f0 url('image.jpg') no-repeat center center / cover;
}

如果这里加上交互，比如想实现点击图片后更换图片。我们会给点击动作后这个div添加一个isChanged类，isChanged的图片不推荐直接使用background替换，而是用background-images,否则，之前设置的background-size会被background里的默认值覆盖掉导致不生效。