html - CSSでimgタグのsrc属性に相当するものを設定することは可能ですか？

Question

srcCSSで属性値を設定することはできますか？現在、私がしていることは次のとおりです。

<img src="pathTo/myImage.jpg"/>

こんな感じにしたい

<img class="myClass"/>

.myClass {
    some-src-property: url("pathTo/myImage.jpg");

CSSのorプロパティを使用せずにこれを実行したいと思います。backgroundbackground-image:

score 1036 · Accepted Answer

を使用しcontent:url("image.jpg")ます。

完全に機能するソリューション（Live Demo）：

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

テスト済みで動作中：

Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6

テスト済みで動作していません：

FireFox 40.0.2（Developer Network Toolsを観察すると、URLは読み込まれますが、画像は表示されません）
Internet Explorer 11.0.9600.17905（URLが読み込まれない）

score 193 · Accepted Answer

私が今日見つけた解決策があります（IE6 +、FF、Opera、Chromeで動作します）：

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

使い方：

画像は、幅と高さが見えなくなるまで縮小されます。
次に、パディングを使用して画像サイズを「リセット」する必要があります。これは16x16の画像を提供します。もちろん、padding-left /padding-topを使用して長方形の画像を作成することもできます。
最後に、新しい画像が背景を使用してそこに配置されます。
新しい背景画像が大きすぎたり小さすぎたりする場合はbackground-size、たとえばbackground-size:cover;、割り当てられたスペースに画像が収まるように使用することをお勧めします。

また、submit-input-imagesでも機能し、クリック可能なままです。

ライブデモを参照してください：http ：//www.audenaerde.org/csstricks.html#imagereplacecss

楽しみ！

score 128 · Accepted Answer

CSSから画像を設定するための可能なメソッドのコレクション

CSS2の:after疑似要素またはCSS3の新しい構文::afterとプロパティ：content:

_{最初のW3C勧告：カスケードスタイルシート、レベル2 CSS2仕様 1998年5月12日}
^{最新のW3C勧告：セレクターレベル3W3C勧告 2011年9月29日}

このメソッドは、要素のドキュメントツリーコンテンツの直後にコンテンツを追加します。

注：一部のブラウザーは、以下を定義する最新のW3C勧告でさえ無視して、一部の要素セレクターcontent上にプロパティを直接レンダリングします。

適用対象：:beforeおよび:after疑似要素

CSS2構文（上位互換性）：

.myClass:after {
  content: url("somepicture.jpg");
}

CSS3セレクター：

.myClass::after {
  content: url("somepicture.jpg");
}

デフォルトのレンダリング：元のサイズ（明示的なサイズ宣言に依存しません）

この仕様は、：beforeおよび：afterと置換された要素（HTMLのIMGなど）との相互作用を完全には定義していません。これは、将来の仕様でより詳細に定義される予定です。

ただし、この記事の執筆時点でも、<IMG>タグを使用した動作はまだ定義されておらず、ハッキングされた非標準準拠の方法で使用できますが、を使用する<img>ことはお勧めしません。

優れた候補メソッド、結論を参照してください...

** CSS1 **の[`background-image：`]（http://www.w3.org/TR/REC-CSS1-961217#background-image）プロパティ：

^{最初のW3C勧告：カスケードスタイルシート、レベル1 1996年12月17日}

このプロパティは、要素の背景画像を設定します。背景画像を設定するときは、画像が利用できないときに使用される背景色も設定する必要があります。画像が利用可能になると、背景色の上にオーバーレイされます。

このプロパティはCSSの最初から存在していましたが、それでも素晴らしい言及に値します。

デフォルトのレンダリング：元のサイズ（拡大縮小できず、配置のみ）

ただし、

CSS3のbackground-size:プロパティは、複数のスケーリングオプションを許可することで改善されました。

^{最新のW3Cステータス：候補の推奨 CSSの背景と境界線モジュールレベル3 2014年9月9日}

[length> | <percentage> | auto ]{1,2} | cover | contain

ただし、このプロパティを使用しても、コンテナのサイズによって異なります。

それでも良い候補方法です。結論を参照してください...

CSS2のlist-style:プロパティとdisplay: list-item：

^{最初のW3C勧告：カスケードスタイルシート、レベル2CSS2仕様 1998年5月12日}

list-style-image:プロパティは、リストアイテムマーカー（箇条書き）として使用される画像を設定します

リストのプロパティは、リストの基本的な視覚的フォーマットを記述します。スタイルシートでマーカーの種類（画像、グリフ、または数値）を指定できます。

display: list-item—この値により、要素（<li>HTMLなど）でプリンシパルブロックボックスとマーカーボックスが生成されます。

.myClass {
    display: list-item;
    list-style-position: inside;
    list-style-image: url("someimage.jpg");
}

省略形CSS:（<list-style-type> <list-style-position> <list-style-image>）

.myClass {
    display: list-item;
    list-style: square inside url("someimage.jpg");
}

デフォルトのレンダリング：元のサイズ（明示的なサイズ宣言に依存しません）

制限：

-

継承は、「リストスタイル」の値をOL要素とUL要素からLI要素に転送します。これは、リストスタイル情報を指定するための推奨される方法です。

作成者がリストマーカーに個別のスタイル（色、フォント、配置など）を指定したり、その位置を調整したりすることはできません。

<img>この方法は、要素タイプ間で変換を行うことができないため、タグにも適していません。これは、Chromeでは機能しない限定された非準拠のハックです。

良い候補方法、結論を参照してください...

CSS3の推奨border-image:プロパティ：

^{最新のW3Cステータス：候補の推奨 CSSの背景と境界線モジュールレベル3 2014年9月9日}

かなり特殊な方法でサイズを指定することに依存するバックグラウンドタイプのメソッド（このユースケースでは定義されていません）とこれまでのフォールバックボーダープロパティ（例border: solid）：

スクロールメカニズムが発生することはありませんが、最初の画像は祖先またはビューポートによってクリップされる可能性があることに注意してください。

この例は、右下隅の装飾としてのみ構成されている画像を示しています。

.myClass {
    border: solid;
    border-width: 0 480px 320px 0;
    border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}

適用対象：内部テーブル要素を除くすべての要素border-collapse: collapse

それでも、のタグを変更することはできません（ただし、ここにハックがあります）。代わりに、それを装飾することができます。<img>src

.myClass {
    border: solid;
    border-width: 0 96px 96px 0;
    border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png") 
                  0 100% 100% 0;
}

<img width="300" height="120" 
     src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg" 
     class="myClass"

標準が普及した後に検討するのに適した候補メソッド。

CSS3のelement()表記法の草案も言及する価値があります：

注：このelement()関数は、参照される要素の外観のみを再現し、実際のコンテンツとその構造は再現しません。

<div id="img1"></div>

<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">

2つの非表示画像のいずれかのレンダリングされたコンテンツを使用して、CSSを介したIDセレクターに基づいて画像の背景を変更します。#img1

#img1 {
    width: 480px; 
    height: 320px; 
    background: -moz-element(#pic1) no-repeat;
    background-size: 100% 100%;
}

.hide {display: none}

注：これは実験的な-mozものであり、Firefoxのプレフィックスでのみ機能し、 overbackgroundまたはbackground-imagepropertiesでのみ機能し、サイズも指定する必要があります。

element（）ライブデモ

結論

セマンティックコンテンツまたは構造情報はすべてHTMLで送信されます。
スタイリングとプレゼンテーション情報はCSSに含まれます。
SEOの目的で、 CSSで意味のある画像を非表示にしないでください。
通常、背景グラフィックは印刷時に無効になります。
カスタムタグを使用してCSSからスタイルを設定することもできますが、Internet Explorerのプリミティブバージョンは、JavascriptまたはCSSガイダンスなしでは理解しません]（ IEはHTML5タグのスタイルを設定しません（shivを使用））。
SPA（シングルページアプリケーション）は、設計上、通常、背景に画像を組み込んでいます

そうは言っても、画像表示に適したHTMLタグを調べてみましょう。

要素[ `<li>`HTML4.01+]

list-style-imagewithメソッドの完璧なユースケースdisplay: list-item。

要素は<li>空にすることができ、フローコンテンツ</li>を許可し、終了タグを省略することもできます。

.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}

<ul class="bulletPics">
    <li id="img1">movie</li>
    <li id="img2">earth</li>
    <li id="img3">kiwi</li>
</ul>

制限：スタイリングが難しい（width:またはfloat:役立つ可能性がある）

要素[ `<figure>`HTML5+]

figure要素は、（完全な文のように）自己完結型であり、通常はドキュメントのメインフローから単一のユニットとして参照される、いくつかのフローコンテンツ（オプションでキャプション付き）を表します。

この要素はコンテンツなしで有効ですが、を含めることをお勧めします<figcaption>。

したがって、この要素を使用して、イラスト、図、写真、コードリストなどに注釈を付けることができます。

デフォルトのレンダリング：要素は右揃えで、左右両方にパディングがあります。

図ライブデモ

要素[ `<object>`HTML4+]

画像を含めるために、作成者はOBJECT要素またはIMG要素を使用できます。

data属性は必須であり、値として有効なMIMEタイプを持つことができます！

<object data="data:x-image/x,"></object>

注：<object>CSSのタグを利用するための秘訣は、カスタムの有効なMimeTypex-image/xの後にデータなしを設定することです（必要なコンマの後に値にはデータがありません,）

デフォルトのレンダリング：300 x 150pxですが、サイズはHTMLまたはCSSで指定できます。

OBJECTライブデモ

`<SVG>`タグ_

SVG対応のブラウザが <image>必要で、ラスター画像用の要素があります

SVGライブデモ

要素[ `<canvas>`HTML5+]。

width属性のデフォルトは300で、height属性のデフォルトは150です。

CANVASライブデモ

の`<input>`要素`type="image"`

制限：

...要素はボタンのように表示され、要素がボタンであることを示します。

Chromeがフォローし、テキストがない場合は4x4pxの空の正方形をレンダリングします

部分解、セットvalue=" "：

<input type="image" id="img1" value=" ">

INPUT type=imageライブデモ

また、現在作業中のドラフトであるHTML5.1<picture>の次の要素にも注意してください。

score 26 · Accepted Answer

私はこのCSSで空のdivソリューションを使用しました：

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

HTML：

<div id="throbber"></div>

score 15 · Accepted Answer

私は提案された解決策よりも良い方法を見つけましたが、それは確かに背景画像を使用しています。 準拠した方法（IE6では確認できません） クレジット：http ：//www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

CSS：

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

古い画像は表示されず、新しい画像は期待どおりに表示されます。

次のきちんとしたソリューションは、Webkitでのみ機能します

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}

score 13 · Accepted Answer

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

これは、CSSスタイルでIMGプレゼンテーション（実際には画像ではない）を定義するためのソリューションです。

1x1の透明なgifまたはpngを作成します。
その画像にIMGの適切な「src」を割り当てます。
CSSスタイルの「background-image」を使用して最終的なプレゼンテーションを定義します。

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

score 13 · Accepted Answer

これが非常に良い解決策です-> http://css-tricks.com/replace-the-image-in-an-img-with-css/Pro

（s）and Con（s）：
（+）はベクターで動作します相対的な幅/高さの画像（RobAuの回答では処理されないもの）
（+）はクロスブラウザーです（IE8 +でも機能します）
（+）CSSのみを使用します。したがって、img srcを変更する必要はありません（または、アクセス権がない場合/既存のimg src属性を変更したくない場合）。
（-）申し訳ありませんが、背景のcss属性を使用します:)

score 10 · Accepted Answer

いいえ、CSSを介してimagesrc属性を設定することはできません。あなたが得ることができる最も近いものは、あなたが言うように、backgroundまたはbackground-imageです。それはやや非論理的であるため、とにかくそれを行うことはお勧めしません。

ただし、対象のブラウザで使用できる場合は、CSS3ソリューションを利用できます。content:url Pacerierの回答に記載されているように使用してください。以下の他の回答で、他のクロスブラウザソリューションを見つけることができます。

score 9 · Accepted Answer

HTMLコードで2つの画像を定義し、display: none;どちらを表示するかを決定するために使用できます。

score 4 · Accepted Answer

いくつかの画像を「制御」コンテナに入れ、代わりにコンテナのクラスを変更します。CSSで、コンテナのクラスに応じて画像の可視性を管理するルールを追加します。img srcこれにより、単一の画像のプロパティを変更するのと同じ効果が得られます。

HTML：

<span id="light" class="red">
    <img class="red" src="red.png" />
    <img class="yellow" src="yellow.png" />
    <img class="green" src="green.png" />
</span>

CSS：

#light         { ... }
#light         *        { display: none; }     // all images are hidden
#light.red     .red     { display: inline; }   // show red image when #light is red
#light.yellow  .yellow  { display: inline; }   // .. or yellow
#light.green   .green   { display: inline; }   // .. or green

CSSの場合と同様に、すべての画像がプリロードされますが、 JSを介してbackround-image変更する場合とは異なります。img src

score 3 · Accepted Answer

3

別の方法

.myClass {
background: url('/img/loading_big.gif');
}

<div class="myClass"></div>

于 2011-04-01T13:19:11.783 に答える

score 3 · Accepted Answer

HTMLに残すデータもありますが、CSSでsrcを定義することをお勧めします。

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}

score 2 · Accepted Answer

私の知る限り、あなたはできません。CSSはスタイルに関するものであり、画像のsrcはコンテンツです。

score 2 · Accepted Answer

以前の解決策を繰り返し、純粋なCSS実装をここで強調することが私の答えです。

別のサイトからコンテンツを調達しているため、配信されるHTMLを制御できない場合は、純粋なCSSソリューションが必要です。私の場合、ライセンスされたソースコンテンツのブランドを削除して、ライセンシーがコンテンツを購入している会社を宣伝する必要がないようにしようとしています。したがって、私は他のすべてを維持しながら彼らのロゴを削除しています。これは私のクライアントの契約の範囲内であることに注意する必要があります。

{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}

score 2 · Accepted Answer

私はこれが本当に古い質問であることを知っていますが、これが決してできない理由の適切な理由を提供する答えはありません。探していることを「実行」することはできますが、有効な方法で実行することはできません。有効なimgタグを取得するには、src属性とalt属性が必要です。

したがって、src属性を使用しないimgタグを使用してこれを行う方法を提供する回答はすべて、無効なコードの使用を促進しています。

要するに、あなたが探していることは、構文の構造内で合法的に行うことはできません。

出典：W3バリデーター

score 2 · Accepted Answer

または、interwebthingyで見つけたこれを行うことができます。

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">

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

したがって、画像を効果的に非表示にし、背景をパディングします。なんてハックなんだけど、JavaScriptを使わなくてもスケーリングできる代替テキストと背景のIMGタグが必要な場合は？

現在取り組んでいるプロジェクトで、ヒーローブロックの小枝テンプレートを作成しました

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>

score 1 · Accepted Answer

背景プロパティを設定したくない場合は、CSSのみを使用して画像のsrc属性を設定することはできません。

または、JavaScriptを使用してそのようなことを行うこともできます。

score 1 · Accepted Answer

CSSを使用すると、それを行うことはできません。ただし、JQueryを使用している場合は、次のような方法でうまくいきます。

$("img.myClass").attr("src", "http://somwhere");

score 1 · Accepted Answer

あなたはJSでそれを変換することができます：

$('.image-class').each(function(){
    var processing = $(this).attr('src');
    $(this).parent().css({'background-image':'url('+processing+')'});
    $(this).hide();
});

score 0 · Accepted Answer

プロジェクトのコンテキストに基づいて動的にボタンに画像を追加しようとしている場合は、？を使用できます。結果に基づいてソースを参照するようにします。ここでは、mvvmデザインを使用して、Model.Phases [0]値で、ライトフェーズの値に基づいて、ボタンに電球の画像をオンにするかオフにするかを決定します。

これが役立つかどうかわからない。JqueryUI、Blueprint、CSSを使用しています。クラス定義では、必要に応じてボタンのスタイルを設定できる必要があります。

    <button>                           
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>                             
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>   
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>

score 0 · Accepted Answer

これを追加します。背景画像はbackground-position: x y;（x水平y垂直）で配置することもできます。（..）私の場合、CSS：

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)

score 0 · Accepted Answer

HTMlコード：

<!DOCTYPE html>
<html>
     <head>
         <link type="text/css" rel="stylesheet" href="css destination" />
     </head>
     <body>
<!-- click-able pic with link -->
           <a href="site you want"> 
<!-- Take the off if you don't want click-able link -->
                <h1 id(or class)="nameOfClassorid">
                     <span>Text that is not important</span>
                </h1>
           </a>
      </body>
 </html>

Cssコード：

span {
     display: none;
}
h1 id or class {
     height: of pic;
     width: of pic;
/* Only flaw (so far) read bottom */
     background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
     background-image:url(/* 'new background!!!' */);
}

私は放課後数日間htmlを勉強していて、これを行う方法を知りたいと思っていました。背景を見つけて、2と2を組み合わせます。これは100％動作しますが、必要なものを入力していない場合は確認しました!!! 高さを指定する必要があります。高さがないと何もありません!!! アドオンできるこの基本的なシェルはそのままにしておきます。

例：

 <!DOCTYPE html>
 <html>
     <head>
         <link type="text/css" rel="stylesheet" href="style.css" />
     </head>
     <body>
           <a href="http:localhost"> 
                <h1>
                     <span>Text that is not important</span>
                </h1>
           </a>
     </body>
 </html>
span {
     display: none;
}
h1 {
     height: 100px;
     width: 100px;
     background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/Ubuntu-Desktop-@-2011-01-11-191526-300x225.png");
}

h1:hover {
     height: 300px;
     width: 300px;
     background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

PSはい私はLinuxユーザーです;）

score 0 · Accepted Answer

ユーザーが「背景色と画像の印刷」を無効にしてドキュメントを印刷する場合、backgroundまたは失敗する可能性のある方法。残念ながら、これは典型的なブラウザのデフォルトです。background-image

ここでの唯一の印刷に適したクロスブラウザ互換の方法は、ブロンクスによって提案された方法です。

score 0 · Accepted Answer

JSFiddle：https ://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

score -1 · Accepted Answer

HTML5を使用するだけです:)

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>

html - CSSでimgタグのsrc属性に相当するものを設定することは可能ですか？

25 に答える 25

CSSから画像を設定するための可能なメソッドのコレクション

結論

要素[ `<li>`HTML4.01+]

要素[ `<figure>`HTML5+]

要素[ `<object>`HTML4+]

`<SVG>`タグ_

要素[ `<canvas>`HTML5+]。

の`<input>`要素`type="image"`

最新のCSSプロパティを使用して、CSS定義からIMGsrcをロードする

JSFiddle：https ://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

html - CSSでimgタグのsrc属性に相当するものを設定することは可能ですか？

25 に答える 25

CSSから画像を設定するための可能なメソッドのコレクション

結論

要素[ <li>HTML4.01+]

要素[ <figure>HTML5+]

要素[ <object>HTML4+]

<SVG>タグ_

要素[ <canvas>HTML5+]。

の<input>要素type="image"

最新のCSSプロパティを使用して、CSS定義からIMGsrcをロードする

JSFiddle：https ://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

Related

Reference

要素[ `<li>`HTML4.01+]

要素[ `<figure>`HTML5+]

要素[ `<object>`HTML4+]

`<SVG>`タグ_

要素[ `<canvas>`HTML5+]。

の`<input>`要素`type="image"`