web-dev-qa-db-ja.com

CSSで<img>のsrc属性を定義する

CSSで<img>のsrc属性を定義する必要があります。この属性を指定する方法はありますか？

cssattributesimage
96
Massimo Ugues
#divID {
    background-image: url("http://imageurlhere.com");
    background-repeat: no-repeat;
    width: auto; /*or your image's width*/
    height: auto; /*or your image's height*/
    margin: 0;
    padding: 0;
}
71
Ali Poder

これはimgタグとしてコンテンツ要素です

img {
    content:url(http://example.com/image.png);
}
159
Marinos

ありません。背景画像を指定できますが、それはnotと同じです。

46
cletus

CSSはDOM要素の属性に値を定義するために使用されません。これにはJavaScriptの方が適しています。

10
Darin Dimitrov

いいえ。最も近いのは背景画像の設定です。

<div id="myimage"></div>

#myimage {
  width: 20px;
  height: 20px;
  background: white url(myimage.gif) no-repeat;
}
8
RoToRa

これらのソリューションを試した後、私はまだ満足していませんでしたが、これで解決策を見つけました 記事 そして、それはChrome、Firefox、Opera、Safari、IE8 +で動作します

#divId {

  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */

}
5
Eric

その人たちは正しいです。 IMGはコンテンツ要素であり、CSSはデザインに関するものです。しかし、デザインの目的でコンテンツ要素またはプロパティを使用する場合はどうでしょうか？スタイル（CSS）を変更すると変更する必要があるWebページ全体にIMGがあります。

これは、CSSスタイルでIMGプレゼンテーション（実際には画像ではない）を定義するためのソリューションです。
1：1x1の透明なgifまたはpngを作成します。
2：IMGの適切な「src」をそのイメージに割り当てます。
3：CSSスタイルの「背景画像」で最終的なプレゼンテーションを定義します。

それは魅力のように機能します:)

2
Frank