Question

我的通知框需要帮助。

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

这是一个片段：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

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

Answer 1

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

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

.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>

图像部分为背景而不缩放

1 个答案: