Question

因此，在我的网站RedRoll.com上，我正在尝试实现CSS Sprites。（如果向下滚动，则会在“独家！”下看到一个滚动容器。）

.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中指定图标的宽度/高度，它也会更改容器的大小。

如何保持黑色背景大小不变，但指定图标的大小？另外，如何将精灵像当前一样放置在黑色背景的中间？

Answer 1

如果我正确理解了您的问题以及您的限制，则可以使用伪元素来解决此问题。

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

这应该给您所需的控件大小，并从图标sprint /地图集中选择唯一的图标：

[UPDATED]对不起，刚刚注意到我的原始答案丢失了：伪选择器中的content:''-请确保已添加

/* 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不起作用，因为宽度/高度定义了容器

1 个答案: