1

私はさまざまな画像置換方法を使用して練習しており、最近、Scott Kellum による新しい、おそらくより効率的な方法について説明しているいくつかの記事に出くわしました。

この新しい方法に関する元の Web サイトの記事

良さそうなので、練習してみたいのですが、html と css がどうあるべきかわかりません。以下の例では、サンプルのロゴ テキストを含む h1 があります。次に、.hide-text のクラスを h1 に追加し、CSS でスタイルを設定しました。作成した Photoshop のロゴ画像を背景画像として使用しました。画像の幅は 203px、高さは 57px です。

質問 1: ブラウザでコードをテストしたところ、すべて正常に動作しているように見えましたが、Mr.Kellum の画像置換技術の使い方は正しいですか?

質問 2: css で h1 をターゲットにして、幅と高さを宣言する必要がありますか?それとも、以下の例のように、hide-text クラスに幅と高さを直接含めても問題ありませんか?

<style>
.hide-text {
    background: url(images/mylogo.jpg) 0 0 no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 203;
    height: 57px;
    }


<body>
<h1 class="hide-text">MyLogo text</h1>
</body>

どんな助けでも大歓迎です。ありがとうコミュニティ！

4

1 に答える 1

0

画像置換に関する実際の傾向を検索しているときに、css 画像置換博物館を見つけました。そこでスコット・ケラム・メソッドと出会いました。その後、この質問を見つけたので、私はこの手法を使用する専門家ではありません。私の意見を共有したいと思います。

上記のリンクからコピーして貼り付けた実装

質問にも投稿されているように、簡単です。

<h3 class="skm">CSS-Tricks</h3>

CSS

h3.skm {
  width: 300px;
  height: 75px;
  background: url(test.png);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

私がやろうとしている実装

元の記事を読みましたが、再利用のために CSS コードを分割したほうがよいと思います。たぶん、複数の要素を画像に置き換えます。

<h1 class="ir">An awesome pretty title</h1>
<h2>Some words here not replaced with images<h2>
<nav>
   <!-- some links replaced with images that also use css sprites -->
   <a class="ir" href="#">home</a>
   <a class="ir" href="#">sweet</a>
   <a class="ir" href="#">home</a>
</nav>

質問にリンクした投稿で提案されているように、画像置換手法のクラスを再利用するirと、物事が整理されます。

.ir {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
h1 {
  background-image: url('/the-title-replacement.png'');
  width: /*the-image-width*/px;
  height: /*the-image-height*/px;
}
nav a {
  background-image: url('/the-menu-icons-sprite.png');
  width: 24px;
  height: 24px;
}
nav a { background-position: 0 0; }
nav a + a { background-position: 0 24px; }
nav a + a + a { background-position: 0 48px; }

結論

画像の URL とサイズは、置き換えられる要素ごとに設定する必要があります。スプライトを使用している場合、要素のサイズは多くの場合、すべての要素で共有されますが、背景の位置も要素ごとに影響します。

このすべてのユースケースは、CSS コードを分割してスタイルシートを整理することでメリットが得られます。

注: 私は、純粋な css 実装についてこれらの考えを作成しました。css プリプロセッサ (less など) を使用すると、ルールが変更されます。

注 2 : もう 1 つの傾向分析方法は、H5BP チームによって提案されたものです。どちらを使用するかは未定です。

于 2013-04-22T02:44:49.640 に答える