0

是否可以将精灵图标定位为元素的背景？我有一个文件“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; }

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

4

4 回答 4

4

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

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

取自这篇不错的文章的示例：

精灵示例 1

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

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

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

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

精灵示例 2

如果您查看Facebook sprites，您会注意到其中一些很长，一些分组，另一些孤立。您必须针对每种情况调整精灵。

编辑：好的，我得到了你的实际需要。

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

演示

首先，将输入包装在一个 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-request ......选择权在你。

于 2012-10-11T10:35:21.203 回答
1

这是一个快速的脏样本。基本上，只需设置元素 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>
于 2012-10-11T10:53:29.357 回答
1

这是可能的，但有几点需要注意：

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

我认为最好让你的精灵保持一个长长的垂直图标列表，让你的占位符样式不透明，使用边框框模型。此外，图标高度尺寸应该正好是可用背景空间的高度。将属性分开也是一个好主意，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

于 2015-06-04T02:32:02.583 回答
0

我可能会说显而易见的，但是您是否尝试过：

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

}

于 2012-10-11T10:34:56.137 回答