7

我将CSS Sprite 技术与看起来像这样的背景图像一起使用：

在此处输入图像描述

图标的 CSS 代码：

div.icon {
    background-color: transparent;
    background-image: url("/images/icons.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    height: auto;
    vertical-align: text-top;
    width: auto;
}
div.icon:empty {
    width:16px;
    height:16px;
}
div.icon:not(:empty) {
    padding-left:20px;
}
div.icon.attenuation {
    background-position: 0 0;
}

我的图标可以这样使用：

<div class="icon warning"></div>

我想在我的图标中添加一些文本，例如：

<div class="icon warning">There is a warning on this page</div>

但问题是背景图片覆盖了整个文本区域：

在此处输入图像描述

问题是：如何仅将图像的一部分用作部分元素的背景图像？

笔记：

  • 设置width为16pxfordiv.icon没有帮助。
4

4 回答 4

7

请记住，在可能的情况下，您不应该仅仅为了实现设计而更改标记。可以使用您的标记。

div.icon:before {
    content: "";
    background-color: transparent;
    background-image: url("/images/icons.png");
    display: inline-block;
    height: 16px;
    vertical-align: text-top;
    width: 16px;
}

div.icon:not(:empty):before {
    margin-right: 4px;
}

div.icon.attenuation {
    background-position: 0 0;
}
于 2012-06-14T10:02:26.100 回答
6

你有两种方法：

1）您的标记必须是这样的：

<div class="icon warning"></div><div class="txt">There is a warning on this page</div>
.icon {width:10px(for ex.)}

2）您必须更改图像。图像中的图标必须在另一个下方

于 2012-05-07T12:04:59.970 回答
3

抱歉，我之前的回答不太好。

编辑：如果您有 16 像素的填充，则应将宽度设置为 0，而不是 16 像素。而且我:not(:empty)在所有浏览器上都无法使用它；最好摆脱它。所以CSS变成：

.icon {
  ...
  width:0; height:16px; padding-left:16px;
}
.icon:empty {
  width:16px; padding-left:0;
}

jsFiddle

于 2012-05-07T11:58:42.033 回答
-1

设置width: 16px; height: 16px; overflow: hidden; text-indent: -9999em;和删除padding

于 2012-05-07T11:59:21.030 回答