4

私は次のHTMLを持っています:

<a href="#" class="home-block" style="background-color:#464646; background-image:url('wardrobe.jpg')">Wardrobe</a>
<a href="#" class="home-block" style="background-color:#6a0d1f; background-image:url('wine.jpg')">Wine</a>
<a href="#" class="home-block" style="background-color:#291407; background-image:url('coffee.jpg')">Coffee</a>

関連する CSS は次のとおりです。

.home-block {
    background-color: #c2b89c; display: block; height: 180px; line-height:180px;
    text-align: center; font-size: 70px; color:#e2e2e2;
    text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover;
    background-position: center center; box-shadow: 1px 1px 4px #111;
}

私の結果は次のようになります。

ここに画像の説明を入力

それは問題ありませんが、私が本当に望んでいるのは、ブロックが単色になり、ホバー時にのみ画像が表示されることです。そのようです：

ここに画像の説明を入力

レスポンシブ デザインを使用しているため、画面サイズによってブロックのサイズと縦横比が異なることに注意してください。それが私が使用している理由ですbackground-size: cover。また、これはCMSシステム用なので、画像と色をHTMLにインラインで設定して、編集しやすく、ブロックを追加できるようにしたい.

したがって、これを実現するには、基本的に絶対配置要素のないクリーンなソリューションが必要です (幅が固定されていないと破損する傾向があるため)。

私が試したのはこれです：

.home-block { background: none; }
.home-block:hover { background: inherit }

しかし、成功しませんでした。jQuery のいくつかの行でこれらすべてを修正しようとしていましたが、これを実現するための純粋な CSS の方法がないかどうかをすぐに確認したかっただけです。

4

2 に答える 2

6

background-imageHTML でインラインを設定する必要がある場合は、少し注意が必要です。簡単に上書きすることはできません。私がやろうとしているのはbackground-position、ホバー時に変更することです:

.home-block {
    ...
    background-position: 1000px 1000px; // background-image is there but not visible
}
.home-block:hover {
    background-position: center center !important; // make it visible
}

http://jsfiddle.net/h2Jbg/

したがって、通常の状態では、背景画像は表示されませんが、背景色は表示されます。ホバーすると、画像が戻ります。

于 2013-03-17T15:32:18.960 に答える
4

残念ながら、:hover疑似クラスのインラインを使用することはできないため、単一の要素でこのインラインを実現することは困難です。

スタイリングの目的で追加の要素を使用するのは少し見苦しいことがよくありますが、少なくとも目前の問題に対する可能な解決策です。

<div style="background-image: url(http://lorempixel.com/400/200);">
   <div class="home-block">Foo</div>
</div>

次に、CSS で次のようなものを使用できます。

.home-block:hover {
    background: transparent;
}

デモ

このようにして、スタイルシートを更新せずに、個々の背景画像を持つ新しいブロックを追加できます。

于 2013-03-17T15:37:24.413 に答える