CSSでimgタグのsrc属性に相当するものを設定することは可能ですか？
CSSでsrc属性値を設定することは可能ですか？現在私がやっていることは、
<img src="pathTo/myImage.jpg"/>
私はそれがこのようなものになりたい
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
CSSのbackgroundプロパティまたはbackground-image:プロパティを使用して、これを without で実行します。
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
- オペラ10.6
テスト済みで動作していない：
- FireFox 40.0.2（Developer Network Toolsを見ると、URLはロードされているが画像は表示されていないことがわかります）
- Internet Explorer 11.0.9600.17905（URLがロードされない）
私が今日見つけた解決策があります（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
楽しい！
私はこの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>
私は提案された解決策より良い方法を見つけました、しかしそれは確かに背景画像を使います。 準拠方法（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 */
}
その人たちは正しいです。 IMGはコンテンツ要素であり、CSSはデザインに関するものです。しかし、デザイン目的でいくつかのコンテンツ要素やプロパティを使用するときはどうですか。私はスタイル（CSS）を変更すると変更しなければならない私のWebページ全体でIMGを持っています。
これは、CSSスタイルでIMGプレゼンテーション（実際には画像ではありません）を定義するためのソリューションです。
- 1x1の透明GIFまたはPNGを作成します。
- その画像にIMGの適切な "src"を割り当てます。
- CSSスタイルの "background-image"で最終的なプレゼンテーションを定義します。
それは魅力のように働きます:)
これは非常に良い解決策です - > http://css-tricks.com/replace-the-image-in-an-img-with-css/
長所と短所
（+）は、相対的な幅/高さを持つベクトル画像で動作します（ RobAu の answer は処理できません）。
（+）はクロスブラウザです（IE8 +でも機能します）。
（+）CSSのみを使用しています。そのため、img srcを変更する必要はありません（または、アクセス権がない場合、または既存のimg src属性を変更したくない場合）。
（ - ）申し訳ありませんが、 は background css属性を使用しています:)
HTMLコードに2つの画像を定義し、どの画像を表示するかを決定するためにdisplay: none;を使用することができます。
いいえ、CSSを介してimage src属性を設定することはできません。あなたが得ることができる最も近いのは、あなたが言うように、backgroundまたはbackground-imageです。それは多少非論理的になるのでとにかく私はそれをすることをお勧めしません。
ただし、ターゲットとしているブラウザで使用できる場合は、CSS3ソリューションを利用できます。 content:urlPacerierの回答で説明されているように を使用してください。あなたは以下の他の答えで他のクロスブラウザ解決策を見つけることができます。
複数の画像を「制御する」コンテナに入れて、代わりにコンテナのクラスを変更してください。 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のbackround-imageと同様に、すべての画像がプリロードされますが、JSを介してimg srcを変更するのとは異なります。
いくつかのデータをHTMLに残しますが、CSSで src を定義する方が適切です。
<img alt="Test Alt text" title="Title text" class="logo">
.logo {
content:url('../images/logo.png');
}
私が知っている限りでは、あなたはできません。 CSSはスタイルに関するもので、imageのsrcはcontentです。
代替方法
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
以前の解決策を繰り返し、ここで純粋なCSSの実装を強調することが私の答えです。
他のサイトからコンテンツを入手している場合は、純粋なCSSソリューションが必要です。したがって、提供されるHTMLを管理することはできません。私の場合は、ライセンスを受けたソースコンテンツのブランドを削除して、ライセンスを受けている会社がそのコンテンツを購入している会社に宣伝する必要がないようにします。したがって、私は他のすべてを維持しながらそれらのロゴを削除します。私はこれがそうするという私の顧客の契約の範囲内であることに注意すべきです。
{ /* 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);
}
私はこれが本当に古い質問であることを知っています、しかし、これが決してされることができない理由のための答えは適切な推論を提供しません。あなたが探しているものを「する」ことはできますが、それを有効な方法で行うことはできません。有効なimgタグを持つためには、必ずsrc属性とalt属性を持たなければなりません）。
そのため、src属性を使用しないimgタグを使用してこれを行う方法を提供する回答のいずれかが、無効なコードの使用を促進しています。
一言で言えば：あなたが探しているものは、構文の構造の範囲内で合法的に行うことはできません。
出典：W3バリデータ
それとも、私はウェブ間のものに見つけたこれを行うことができます。
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>
あなたはJSでそれを変換することができます：
$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
背景プロパティを設定したくない場合は、CSSのみを使用して画像のsrc属性を設定することはできません。
あるいは、JavaScriptを使ってそのようなことをすることができます。
CSSを使うと、 - できません 。しかし、JQueryを使用している場合は、次のような方法でうまくいくでしょう。
$("img.myClass").attr("src", "http://somwhere");
プロジェクトのコンテキストに基づいてボタンに画像を動的に追加しようとしている場合は、？を使用できます。結果に基づいてソースを参照するようにしてください。ここでは、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")"/>
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/[email protected]");
}
h1:hover {
height: 300px;
width: 300px;
background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}
P.Sはい、私はLinuxユーザーです;）
backgroundまたはbackground-imageに基づくどのメソッドも、ユーザーがでドキュメントを印刷すると失敗する可能性があります。 「印刷 バックグラウンド 色と 画像「 無効です。これは残念ながら典型的なブラウザのデフォルトです。
ここでの唯一の印刷に適したクロスブラウザ互換の方法は、Bronxによって提案されたものです。
私はこれを追加します：背景画像も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;
(..)
}
(...)