3

data-img を疑似要素の画像として設定しようとしていますが、成功しませんでした。これまでに試したことは次のとおりです。

マークアップ:

<div data-img="http://www.hdwallpapers.in/walls/cute_baby_in_autumn-wide.jpg">radomPicture</div>

スタイル：

div:before{
    content: url('attr(data-img)');
    position:absolute;
    width:200px;
    height:200px;
}

結果の壊れた画像: http://jsfiddle.net/vfPKb/

ここに画像の説明を入力

4

1 に答える 1

-2

これが可能かどうかは完全にはわかりません。ここで抱えているのと同じ問題に遭遇するかもしれませんが、 CSS 変数をいじりたいと思うかもしれません。ある CSS 関数に別の CSS 関数から生成された値を送信できるとは思えません (var関数を介して CSS 変数にアクセスすることさえできます)。満足のいくものではないことは承知していますが、すばやく簡単な jQuery を検討したことはありますか?

$("div[data-img]").each(function(){$(this).css("background-image", "url(" + $(this).attr("data-img") + ")")});

これが分岐したJSFiddle です

プロジェクトに新しいライブラリを追加することに気が進まない場合は、バニラ Javascript でも同様のことができます。

編集：

マークアップを編集できる場合、はるかに簡単な (完全に可能ではないかもしれませんが) 解決策は、インライン スタイルを使用することです。

<div style="background-image: url('http://www.hdwallpapers.in/walls/cute_baby_in_autumn-wide.jpg')">radomPicture</div>

img-data属性を追加するよりも属性を追加する方がはるかに簡単なシナリオはあまり想像できませんがstyle、それは、このマークアップがすべてどのように生成されているか、またはその力が最初からあなたの手にあるかどうかにかかっていると思います。

于 2013-09-20T21:21:25.983 に答える