1

私は一見単純なhtml構造を持っています:

<div class="featured-image img-wrapper full-width">
  <a href="http://localhost/wordpress/?p=26">
    <img ... />
  </a>
</div>

ここで、a (残念ながら独自のクラスがありません) をターゲットにしたいので、この CSS を使用します。

.img-wrapper a {
  background-image:url(../images/bkgs/stripes_tiny_08.png);
  background-repeat:repeat;
}

しかし、この a 要素には何も起こりません! 背景画像そのものではなく、シンプルな色も試してみました。奇妙なことは、ページのさらに上に別の同様の構造があり、そこでセレクターが機能することです! Firebug は次の CSS パスを示しています (ターゲット a は最後にあります)

working: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content article#post-26.post-26 div.featured-image a.img-link
not wrk: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content aside#yarpp_widget-2.widget div.bloglist article.post div.three div.featured-image a

私はアイデアがありません。オーバーライドする CSS 宣言は見つかりませんでした。どうすればそれをターゲットにできますか？

編集: ターゲット a には、:hover 不透明度が設定された img が含まれています。そうすれば、背景画像ではなく、背景色が機能することがわかります

4

3 に答える 3

0

タグの寸法を指定しない場合<a>、タグに含まれるタグの寸法に準拠し<img>ます。そのため、適用する背景画像はすべて。でオーバーレイされます<img>。繰り返しをオンにすると、背景画像が要素内に収まる（トリミングまたは全体）回数だけ繰り返されます。要素に、それがラップする画像の幅と高さよりも大きい幅と高さを指定すると、背景が表示されます。

これがあなたが直面していた問題だったと思います。それ以外の場合は、コードまたはデモをもう少し投稿できれば、より適切にサポートできるようになります。

 

編集：：hoverの不透明度に関する編集に気づきました。私が提案するのは、スタイリングを次のように変更することです。a > img:hover { visibility: hidden; }

于 2012-07-31T14:31:42.640 に答える
0

あなたはこの効果をしようとしていますか？http://jsfiddle.net/r48ST/1/

[編集]: これはその効果http://jsfiddle.net/r48ST/2/で、画像に不透明度を追加しただけです。また、不透明度にトランジション効果を適用すると、完全な効果が得られます。

于 2012-07-31T14:28:03.880 に答える
0

img を削除します (透明でない場合)

競合の場合:

  • css 命令の最後に !important を置きます。
  • またはインラインスタイルを試してください。
于 2012-07-31T14:25:37.687 に答える