html - 图像部分作为背景，不缩放

Question

我的通知框需要帮助。

我想要一个背景图片，它是一个带有多个图标的 Sprite 。我只想要灯泡。

这是一个片段:

.focus-info {
    background: #fff5ec url("https://www2.pic-upload.de/thumb/32630279/sprite.png") no-repeat scroll 14px -1085px;
    border: 1px solid #fd823e;
    color: #d06124;
    font-style: normal;
    margin: 12px 0 0;
    padding: 12px 12px 12px 48px;
}

.focus-info.notification {
    background-color: #fefdf5;
    border-color: #e3b600;
    color: #b4920d;
    display: block;
}

<em class="focus-info notification">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<br><br>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</em>

在此代码段中，如果文本变大，您可以看到带有其他图标的背景。如何将 background-size 设置为 20x30px 但不调整整个框的大小？

如果我只添加 background-size: 20px 30px，图片会缩放，我再也看不到灯泡了。

我不想添加只有图标的元素。

Answer 1

如果不想为背景添加元素，可以使用:before。

为 .focus-info 类添加一个 :before 样式，并在其中设置背景。

.focus-info:before {
 background: #fff5ec url(https://www2.pic-upload.de/thumb/32630279/sprite.png) no-repeat scroll 0px -1094px;
    content: "";
    width: 20px;
    height: 25px;
    position: absolute;
    top: 10px;
    left: 10px;
}

.focus-info {
    border: 1px solid #fd823e;
    color: #d06124;
    font-style: normal;
    margin: 12px 0 0;
    padding: 12px 12px 12px 48px;
    position:relative;
}

.focus-info.notification {
    background-color: #fefdf5;
    border-color: #e3b600;
    color: #b4920d;
    display: block;
}

<em class="focus-info notification">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<br><br>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</em>