5


1

CSSを使用してHTMLイメージをオーバーライドする方法

私は現在のコードを持っています:

#content img[src="/img/test.gif"] {
    background-image:url(dark-img.png) !important;
}

私の理解では、 `!important;`は既存の値をオーバーライドしますか?

なぜ現在のHTMLイメージがそこで上書きされないのですか? 背景がHTML画像の「背後」に表示されます。

HTML画像の*前に*欲しいのですが、これはCSSまたはJSを使用して可能ですか?

編集:その価値のために、サイトの既存のスタイルを変更するユーザースクリプトを作成します。 そのため、HTMLイメージに直接アクセスすることはできません。

9 Answer


7


画像の置き換えにJavaScriptは必要ありません! CSSセレクターで画像を識別できる限り、CSSを使用してトリックを行うことができます。

こちらのソリューションをご覧くださいhttp://www.audenaerde.org/csstricks.html#imagereplacecss


2


`background-image`プロパティは、画像に適用される場合、(ドラムロール…​ )画像の背景画像。 それは常に画像の背後にあります。

画像を画像の_front_に表示する場合、2つの画像、または最初の画像を覆う背景画像を持つ別のコンテナを使用する必要があります。

ところで、オーバーライドするために `!important`に依存するのは悪い習慣です。 また、1)要素のスタイル属性の宣言をオーバーライドできないため、2)マークアップと現在のCSSに基づいて機能する場合にのみ機能するため、無効になる可能性があります。 あなたの場合、すべてのhuffingとpuffing、および `!important`宣言は、イメージにそれができないことをさせません。


2


CSSの画像の置換は、いくつかの方法で実行できます。 それぞれにいくつかの欠点があります(セマンティクス、seo、ブラウザー互換性など)。

このリンク9(* 9!*)では、さまざまな手法が非常に良い方法で説明されています。

一般的なCSSに興味がある場合:サイト全体を見る価値があります。


1


「userscript」を使用して「src」属性値を変更します。

IDがそこにある場合、これを行うことができます:

document.getElementById('TheImgId').src = 'yournewimagesrc';

IDがない場合:

var imgElements = document.getElementsByTagName('img');

`imgElements`の繰り返しを行います。 その `src`値があなたの基準と一致するとき、あなた自身で値を変更してください、ブレークしてください。

更新:

Javascript:

    function ChangeImageSrc(oldSrc, newSrc) {
        var imgElements = document.getElementsByTagName('img');
        for (i = 0; i < imgElements.length; i++){
            if (imgElements[i].src == oldSrc){
                imgElements[i].src = newSrc;
                break;
            }
        }
    }

HTML:

    setTimeout("ChangeImageSrc('http://i.stack.imgur.com/eu757.png', 'http://i.stack.imgur.com/IPB9t.png')", 5000);

プレビュー

画像:https://i.stack.imgur.com/dUFZd.png [alt text]

最初の画像は5秒後に置き換えられます。 * http://jeaffreygilbert.com/ChangeSrcByJs.html [Live Demo] *を試してください。


1


コードはhttp://www.audenaerde.org/csstricks.html#imagereplacecss[cssのみを使用]です。


  • 画像サイズを0x0に設定し、

  • 目的のサイズ(150x200)の境界線を追加します。

  • 画像を背景画像として使用して塗りつぶします。

この回答に賛成票を投じる場合は、https://stackoverflow.com/a/10396698/1587329 [@ RobAu’s answer]にも賛成票を投じてください。


0


最初の画像も背景画像として配置する必要があります。 その後、オーバーライドできます。 サイトの「標準」CSSファイルで行うことができます。すべてのユーザーが自分のサイトを取得し、必要なものをオーバーライドできます。


0


私はここでのすべての答えに同意しますが、IEのような「ブラウザ」は画像を選択する手段としてimg [src = "/ img / test.gif"]を好まないとidが指摘していると思いました。 クラスまたはIDが必要です。


0


タグに表示される画像は、背景ではなく要素の前景にあるため、背景画像を設定しても画像は上書きされません。ご覧のように、メイン画像の背後に表示されます。

あなたがしたいのは、画像を置き換えることです。 オプションは次のとおりです。

  • タグではなく背景画像を持つ要素から始めます。 Then CSSで背景画像を変更すると、それが置き換えられます。

  • タグから始めますが、Javascriptを使用してsrc属性を変更します。 (これはCSSではできませんが、JSでは十分簡単です)

編集:

質問であなたの編集を見て、私はオプション2をお勧めします-src属性を変更するためにJavascriptを使用します。 とても簡単です。このような何かがトリックを行います:

document.getElementById('myimgelement').src='/newgraphic.jpg';


0


別のSOページで同様の質問に答えました。

.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

そのため、画像を効果的に非表示にし、背景をパディングします。 なんてハックなのか、もしあなたがJavascriptを使わずに拡張​​可能な代替テキストと背景を使いたいなら?