Question

是否可以将精灵图标定位为元素的背景？我有一个文件，“icons.png”，其中包含几个图标。我想选择其中一个作为元素的背景。通常我会用 .sprite { background: url('imgs/icons.png') no-repeat 0 -21px; width: 17px; height: 10px; }并使用此类作为按钮等...

问题是我有文本输入，我想修改它的占位符首先，我做了这个，如果我使用的文件是图标本身

，这完全有效

:-webkit-input-placeholder{ background: url('singleIcon.jpg') center right no-repeat; }

但现在我想使用包含更多图标的文件。是否可以使用这样的东西？

:-webkit-input-placeholder{ background: url('imgs/icons.jpg') center right no-repeat; }

最后一行代码中的问题是它会选择我的所有图像（当然包含我所有的图标我想在网站上使用），我只想选择一个部分该图像（我想要使用的图标）

Answer 1

实际上，精灵仅用作背景（或者您需要设置某种复杂的裁剪）。

你要做的是将元素的大小设置为你必须显示的相同精灵的部分，并且背景的位置等于精灵中图标的x和y坐标，从左上角。

取自this nice article的例子：

sprite example 1

“第2项”是116x48，从12px（x coord）和70px（y coord）开始。

所以你的元素的CSS应该是：

.element {
    width:116px;
    height:48px;
    background:url(sprites.png) -12px -70px no-repeat;
}

但是，如果你的元素比上面的尺寸更高/更宽，怎么办？然后，您必须使用足够的透明/空白区域隔离该图标，以便其他图标不会显示。

sprite example 2

如果你抬头看Facebook sprites，你会注意到其中一些很长，一些人分组，另一些人孤立。你必须为每种情况调整精灵。

编辑：好的，我确实需要你。

使用input并不容易，因为你不能在其上使用伪元素。这是一个解决方法。

<强> Demo

首先，将输入包装在div中：

<div class="inputWrapper">
    <input type="text" placeholder="placeholder text">
</div>

然后添加一些CSS：

div.inputWrapper {
    position:relative; /* that's important */
    float:left; /* or display:inline-block; */
}
div.inputWrapper:after {
    background:#000 url(sprites.png) 0 -2px no-repeat; /* adjust background position */
    content:" "; /* whitespace needed for the pseudo-element to be displayed */
    position:absolute;
    top:1px; right:2px; /* some room for the borders */
    width:16px; /* icon width */
    height:18px; /* icon height */
}
div.inputWrapper input {
    padding-right:16px; /* so the text won't go behind the icon */
}

我知道这很复杂，但另一种方法是创建另一个http请求......选择权归你所有。

Answer 2

这是一个快速的脏样本。基本上，只需设置元素CSS的background-position属性。

<!DOCTYPE html>
<html>
<head>
<script>
var curFrame = 0;
var numFrames = 10;
var animTimer;

function advanceFrame()
{
    var hero;
    curFrame++;
    if (curFrame >= numFrames)
        curFrame = 0;

    hero = document.getElementById("hero");

    var posX = curFrame * -64;
    curPos = posX+"px 0";

    hero.style.backgroundPosition = curPos; //offsets[curFrame];
}

function myInit()
{
    animTimer = setInterval(advanceFrame, 200, false);
}
</script>
<style>
#hero
{   /* image is 638x64 pixels - it has 10 sprites in it, horizontally offset */
    background-image: url(http://blogs.msdn.com/cfs-file.ashx/__key/CommunityServer-Blogs-Components-WeblogFiles/00-00-00-53-00-metablogapi/5545.image_5F00_13D4E783.png);
    display: block;
    width: 64px;
    height: 64px;
}
</style>
</head>
<body onload='myInit();'>
    <div id='hero'></div>
</body>
</html>

Answer 3

这是可能的，但有些事情需要注意：

占位符伪类在浏览器中的工作方式不一致，例如： Firefox在整个输入元素上，Chrome仅在行高。
默认情况下，占位符伪类会在原始输入框的顶部添加不透明度图层。
如果裁剪图标不是精灵图像上的第一个图标，则占位符伪类的背景图像需要“重复”。
表单元素的默认框大小可能与其他元素不同，因此边框/填充可能会更改背景图像大小的计算。

我认为最好让你的精灵保持一个很长的垂直图标列表，使你的占位符样式不透明，使用边框框模型。此外，图标高度尺寸应该恰好是可用背景空间的高度。保持background-*属性分离也是一个好主意，因此您对精灵的处理变得更加清晰和易于阅读。

假设您有4个50x50图标的列表 - 即50x200图像，您可以执行以下操作：

input {
    box-sizing: border-box;                 /* keep box-sizing consistent */
    width: 200px;
    height: 52px;                           /* compensate 2px for border */
    border: 1px solid black;
    background-color: blue;
    background-image: url('icons.png');
    background-size: 50px 200px;
    background-position: right 20px top 0;  /* assuming you want the icon to "float" right */
    background-repeat: repeat-y;          
}
::-webkit-input-placeholder {
    background-color: yellow;
    background-image: url('icons.png');
    background-size: 50px 200px;
    background-position: right 20px top 50px; /* use second icon in the sprite */
    background-repeat: repeat-y;
    opacity: 1;                               /* don't show the underlying input style */
}

另请记住将样式应用于::-moz-placeholder和:-ms-input-placeholder

Answer 4

我可能会说明显而已，但你试过了吗？

:-webkit-input-placeholder{ background: url('imgs/icons.jpg')  no-repeat 0 -21px; width: 17px; height: 10px;

}

CSS sprites作为背景

4 个答案: