0

スプライトアイコンを要素の背景として配置することは可能ですか？いくつかのアイコンを含むファイル「icons.png」があります。そのうちの1つを要素の背景として選択したいと思います。通常、私は .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; }

コードの最後の行の問題は、すべての画像（もちろん、Webサイトで使用したいすべてのアイコンが含まれている）を選択し、その画像の一部（使用したいアイコン）のみを選択したいということです。 ）。

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のスプライトを調べると、非常に長いスプライト、グループ化されたスプライト、孤立したスプライトがあります。それぞれの状況に合わせてスプライトを調整する必要があります。

編集：わかりました、私はあなたの実際の必要性を得ました。

input疑似要素を使用できないため、sを使用するのは簡単ではありません。ここに回避策があります。

デモ

まず、入力を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リクエストを作成することです...選択はあなた次第です。

于 2012-10-11T10:35:21.203 に答える
1

これが簡単なnダーティサンプルです。基本的には、要素の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 に答える