web-dev-qa-db-ja.com

CSSはデータ画像属性によって背景画像を設定します

このパターンを持つ要素の種類があります：

<div data-image="{imageurl}" ...></div>

この要素を設定したいbackground-imageからdata-image。このCSSコードをテストします。

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

境界線は正しく表示されますが、バックグラウンドでは何も起こりませんcss（jsまたはjqではなく）でのみこのコードを修正するにはどうすればよいですか？

htmlcssurlbackground-imageattr
38
Hossain Khademian

執筆時点では、ブラウザの attr()表記 のcontent以外のCSSプロパティ-background-imageのような-は verylimited 。

また、 CSSレベル2仕様 に従って、url()とattr()の組み合わせは無効です。
content: url(attr(data-image));。

そのため、現時点では、目的の結果を達成するためのクロスブラウザーCSSソリューションはありません。 JavaScriptの使用がオプションでない限り：

var list = document.querySelectorAll("div[data-image]");

for (var i = 0; i < list.length; i++) {
  var url = list[i].getAttribute('data-image');
  list[i].style.backgroundImage="url('" + url + "')";
}
div[data-image] {
  width: 100px; height: 100px; /* If needed */
  border: 2px solid black;
}
<div data-image="http://placehold.it/100"></div>
31
Hashem Qolami

あなたの[〜＃〜] html [〜＃〜]：

_<div data-image="path_to_image/image_file.extension" ... ></div>
_

あなたの[〜＃〜] css [〜＃〜]：

_div:after {
    background-image : attr(data-image url);
    /* other CSS styling */
}
_

問題点：

これはあなたの必要な答えです。 w3.orgのこのドキュメントを確認してください。しかし、主な問題は、まだ動作しません！。多くのブラウザでは、attr()がCSSコーディングの_content:_属性で使用されると正常に実行されます。ただし、CSSの他の属性で使用すると、主要なブラウザーでさえも、期待どおりに機能しません。

ソリューション：

  • JavaScriptまたはjQueryなどのスクリプトを使用します。

参照：

ありがとう：

15
cuSK

目標が、CSS定義ではなくHTMLドキュメント内からHTML要素のbackground-imageスタイルを設定できる場合、HTML要素のstyle属性を使用しないのはなぜですか？

div[style^='background-image'] {
  width:400px;
  height:225px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  /* background-image is not set here... */
}
<!-- ... but here -->
<div style="background-image:url(http://img01.deviantart.net/5e4b/i/2015/112/c/5/mandelbrot_62____courage_to_leave___by_olbaid_st-d646sjv.jpg)"></div>

編集：

スタイルで<div>を選択することがオプションではない場合、クラスを指定してクラス名で選択できる場合があります。

8
Carvo Loco

_data-_属性（または一般的にattr()アプローチ）に代わる素敵な代替手段は、カスタムプロパティ（ [〜 ＃〜] mdn [〜＃〜] 、 csswg 、 css-tricks ）。

それらの値は文字列に限定されないため、カスタムプロパティ値として許可されている任意の型を渡すことができます！

また、実行時にこれらのプロパティを更新し、スタイルシートを交換するという利点も得られます。

_.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}_
_<div  class="kitten"
      style="--bg-image: url('http://placekitten.com/525/252');">
</div>_
2
Eliran Malka