Html CSS精灵无法工作，因为宽度/高度定义了容器

所以，在我的网站RedRoll.com上，我试图实现CSS精灵。 如果向下滚动，您将在“独占”下看到一个滚动容器

。只需向左滚动btn{ 左：0px； 顶部：0px； 宽度：34px； 身高：100%； 背景：000网址'https://www.redroll.com/wp-content/themes/steam/images/arrow-left.png没有重复中心； 背景尺寸：7px 12px！重要；

---

} 如果我正确理解了您的问题和约束条件，这个问题可以使用伪元素来解决

一种方法可能是如下所示稍微修改现有CSS的样式，并通过伪元素添加一个浮动图标

这将为您提供所需的大小控制，并从图标sprint/atlas中选择独特的图标：

[更新]抱歉，刚刚注意到我的原始答案缺失：内容：在伪选择器中-请确保已添加此选项

/* Leave existing styling for box sizing mostly untouched, with minor adjustments */
.simply-scroll-btn-down {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 25px;
    background: #000; // Remove image, etc
    position:relative; // Add this so that pseudo element can be centered
}

/* Display a pseudo element for icon */
.simply-scroll-btn-down:after {

    //[UPDATE] This is required
    content:'';

    position:absolute;
    display:block;

    // This translates the pseduo element for centering
    left: 50%;
    top: 50%;

    // This adjusts the pseduo element for centering based on pseduo elements dimensions
    margin-left:-20px;
    margin-top:-20px;
    width: 40px;
    height: 40px;

    // Adjust these rules to suit the icon coordinates in your sprite/atlas 
    background-image: url('YOUR_SPRITE_URL');  // Customise as needed
    background-repeat:  no-repeat; // Customise as needed
    background-position: 10px 10px; // Customise as needed
}

---

你也可以发布你的HTML代码吗？为了让我们更好地帮助您，请您更新您的问题，以便在问题本身的a中显示您的相关代码https://jsfiddle.netThis 除非我做错了，否则它似乎不起作用：因此，澄清一下：after的宽度/高度定义了精灵中图标的大小，然后背景位置显示精灵中图标的起始坐标？抱歉，我注意到我的答案不完整-我忘了包括内容：，我已经更新了上面的答案。希望这个帮助我可以帮助的小伙子：-如果你还有什么需要帮助的，请随时PM我-祝你有一个美好的一天！