Css 背景大小不适用于普通类是否需要任何解决方法

我正在尝试从共享类名设置背景大小。但不适用。如果我单独添加，它会起作用。我的代码有什么问题吗？或者它是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>

---

单独添加重复属性背景重复：无重复；还可以将背景更改为背景图像

然后，将下面的样式添加到图标项类中以对齐内联

div.icon-item{
    display: inline-block;
}

div.icon-item{ 显示：内联块； } div.icon-item.icon{ 填充：75px； 显示：内联块； 保证金：0自动； 背景尺寸：包含； } div.icon-item.icon.blend{ 背景图像：urlhttps://i.stack.imgur.com/PR5cj.jpg; 背景重复：无重复； } div.icon-item.icon.pour{ 背景图像：urlhttps://i.stack.imgur.com/PR5cj.jpg; 背景重复：无重复； } div.icon-item.icon.air-dry{ 背景图像：urlhttps://i.stack.imgur.com/PR5cj.jpg; 背景重复：无重复； } div.icon-item.icon.cut{ 背景图像：urlhttps://i.stack.imgur.com/PR5cj.jpg ; 背景重复：无重复； } div.icon-item.icon.package{ 背景图像：urlhttps://i.stack.imgur.com/PR5cj.jpg; 背景重复：无重复； } sss 这是最后一部动画

---

下面是一个简单的示例来解决您的问题。问题在于在更具体的选择器下使用background属性。当您没有为背景大小属性指定值时，背景将其设置为默认值

更改特定图标以使用背景图像和背景重复可以直接修复此问题

div.icon-holder{ 宽度：150px； 高度：150像素； 边框：1px虚线； } 分区图标{ 填充：75px； 背景尺寸：包含； } div.icon.blue{ 背景重复：无重复； 背景图像：urlhttps://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Lightblue.svg/900px-Lightblue.svg.png; }

---

您能同时添加HTML吗？@AlwaysHelping-HTML部分以及添加的.div.icon-item.icon？@wazz-yes。这是正确的改变背景的背景图像。。您正在使用background覆盖背景大小，并使用background repeat:no repeat进行重复