我试图从共享的类名设置背景大小。但不适用。如果我单独添加它的作品。我的代码有问题吗？还是CSS标准有此问题？有人可以澄清一下吗？
这是我的CSS：
div.icon-item .icon{
padding: 75px;
display: inline-block;
margin: 0 auto;
background-size: contain; //common property not works.
}
div.icon-item .icon.blend {
background: url(./images/blend-blue.png) no-repeat;
}
div.icon-item .icon.pour {
background: url(./images/blend-blue.png) no-repeat;
}
div.icon-item .icon.air-dry {
background: url(./images/blend-blue.png) no-repeat;
}
div.icon-item .icon.cut {
background: url(./images/blend-blue.png) no-repeat;
}
div.icon-item .icon.package {
background: url(./images/blend-blue.png) no-repeat;
}
我的html：
<div class="anim-container">
<div class="first">sss</div>
<div class="anim-works" id="anim-visible">
<div class="runner"></div>
<div class="item-holder">
<div class="icon-item">
<span class="icon blend"></span>
</div>
<div class="icon-item">
<span class="icon pour"></span>
</div>
<div class="icon-item">
<span class="icon air-dry"></span>
</div>
<div class="icon-item">
<span class="icon cut"></span>
</div>
<div class="icon-item">
<span class="icon package"></span>
</div>
</div>
</div>
<div class="last">
this is last anim
</div>
</div>
这是一个简化的示例，可以解决您的问题。问题在于background在更具体的选择器下使用该属性。如果不为其指定值，则background将该background-size属性设置为默认值。
更改要使用的特定图标background-image并background-repeat直接解决此问题。
div.icon-holder {
width: 150px;
height: 150px;
border: 1px dashed;
}
div.icon {
padding: 75px;
background-size: contain;
}
div.icon.blue {
background-repeat: no-repeat;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Lightblue.svg/900px-Lightblue.svg.png);
}<div class="icon-holder">
<div class="icon blue"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句