CSS Sprite 不起作用，因为 Width/Height 定义了容器

Question

因此，在我的网站 RedRoll.com 上，我正在尝试实现 CSS 精灵。（如果向下滚动，您会在 "Exclusive!" 下看到一个滚动容器）

.simply-scroll-btn-left {
    left: 0px;
    top: 0px;
    width: 34px;
    height: 100%;
    background: #000 url('https://www.redroll.com/wp-content/themes/steam/images/arrow-left.png') no-repeat center center;
    background-size: 7px 12px !important;
}

如您所见，当前箭头后面有黑色背景。背景为 34px x 100%。

但是问题来了。 CSS 中定义的宽度和高度在它周围创建了黑色容器，所以如果我尝试在我的 sprite 中指定图标的 width/height，它也会改变容器的大小。

如何保持黑色背景大小不变但指定图标的大小？另外，如何让精灵像现在一样在黑色背景的中间居中？

Answer 1

如果我正确理解你的问题和你的限制，这个问题可能可以使用伪元素来解决。

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

这应该为您提供所需的控件大小，以及 select 来自您的图标的独特图标 sprint/atlas:

[已更新] 抱歉，刚刚注意到我的原始答案丢失了：content:'' 在伪 select 或者 - 请确保已添加

/* 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
}

CSS Sprite 不起作用，因为 Width/Height 定义了容器

CSS Sprite Doesn't Work Because Width/Height defines container

html

css

css-sprites