mam rodzaju elementów z tego wzoru:CSS background-image zestaw danych o wizerunku atr

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

Chcę ustawić te elementy background-image do data-image. Przetestować ten kod CSS:

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

krawędzi wskazują poprawnie, ale nic nie stało na tle Jak można naprawić ten kod tylko z CSS (nie js lub jq)?

Źródło

2014-11-17 Hossain Khademian

Zastosuj szerokość i wysokość dla tego samego. –

szerokość i wysokość? –

Jak pisania, wsparcie przeglądarka attr() notation na właściwości CSS innych niż content - jak background-image - jest very limited.

Poza tym, jak na CSS level 2 spec, łącząc url() i attr() nie jest ważny:
~~content: url(attr(data-image));~~.

W związku z tym nie ma obecnie rozwiązania CSS dla różnych przeglądarek, aby osiągnąć pożądany wynik. Chyba że przy użyciu JavaScript jest opcja:

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>

Źródło

2014-11-17 08:24:05

https://jsfiddle.net/x19kjk0g/ byłoby miło:/ –

Limit yes, attir (dane) działa w większości przeglądarek, ale wersja CSS3 (fallback typu danych) nie jest obsługiwana. [Zobacz status przeglądarki dla CSS3 attr] (http://caniuse.com/#search=css3%20attr) – TheCrazyProfessor

W swojej HTML:

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

W swojej CSS:

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

Problem:

To jest twoja wymagana odpowiedź. Sprawdź tę dokumentację w . Ale głównym problemem jest to nie zadziała, jeszcze nie!. W wielu przeglądarkach, attr() działa pomyślnie, gdy jest używany w atrybucie content: kodu CSS. Ale używanie go w innych atrybutach CSS nie działa zgodnie z oczekiwaniami, nawet w największych przeglądarkach.

Rozwiązanie:

używać skryptów takich jak JavaScript lub jQuery.

Referencje:

Dzięki:

Hashem Qolami do poprawiania mojej składni. :)

Źródło

2014-11-17 08:25:44 cuSK

Zauważ, że 'url (attr (data-image))' jest * zdecydowanie * źle. Zgodnie z [Moduł wartości CSS i jednostek poziomu 3] (http://www.w3.org/TR/css3-values/#url), notacja "url()" akceptuje tylko "/ " jako identyfikator URI. OP użył już poprawnej składni 'attr()', ale nie jest jeszcze zaimplementowany w przeglądarkach. –

@HashemQolami, dziękuję. Ale nie rozumiem dokumentacji adresu URL. Co dokładnie przyjdzie zamiast 'url (attr())' ?? – cuSK

Jak już wspomniałem, OP używał prawidłowej składni: 'attr (URL danych-danych)' podanej przez [spec] (http://www.w3.org/TR/css3-values/#attr). Nowa składnia 'attr()' to: 'attr (? [, ]?)' Gdzie opcjonalne '' określa typ podanego '' a '' będzie domyślną wartością, jeśli nie ma nazwanego atrybutu. –

Jeśli celem jest w stanie ustawić background-image styl elementu HTML z poziomu dokumentu HTML zamiast definicji CSS, dlaczego nie użyć inline style atrybut elementu HTML?

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>

EDIT:

Jeśli wybranie <div> według stylu nie jest opcją, może być w stanie dać mu klasę i wybierz go przez nazwę klasy.

Źródło

2016-10-04 23:38:16

To jest dobre, alternatywne podejście: – mzvarik

To jest proste rozwiązanie problemu bez parowozów przeglądarki i dlatego powinno zostać wznowione. – Joschi

CSS background-image zestaw danych o wizerunku atr

Odpowiedz

Problem:

Powiązane problemy