Zbiór możliwych metod ustawiania obrazów z CSS
CSS 2 „s :afterPseudoelement lub nowszy składni ::afterz CSS 3 wraz z content:właściwości:
Pierwsza rekomendacja W3C: Kaskadowe arkusze stylów, poziom 2 Specyfikacja CSS2 12 maja 1998
Najnowsza rekomendacja W3C: Selektory Poziom 3 Rekomendacja W3C 29 września 2011
Ta metoda dodaje treść tuż po zawartości drzewa dokumentu elementu.
Uwaga: niektóre przeglądarki eksperymentalnie renderują contentwłaściwość bezpośrednio na niektórych selektorach elementów, ignorując nawet najnowsze zalecenia W3C, które definiują:
Dotyczy: :beforei :afterpseudoelementów
Składnia CSS2 (kompatybilna z przyszłością):
.myClass:after {
content: url("somepicture.jpg");
}
Selektor CSS3:
.myClass::after {
content: url("somepicture.jpg");
}
Domyślne renderowanie: Rozmiar oryginału (nie zależy od wyraźnej deklaracji rozmiaru)
Ta specyfikacja nie definiuje w pełni interakcji: przed i po po zastąpieniu elementów (takich jak IMG w HTML). Zostanie to określone bardziej szczegółowo w przyszłej specyfikacji.
ale nawet w momencie pisania tego tekstu zachowanie ze <IMG>znacznikiem wciąż nie jest zdefiniowane i chociaż można go używać w zhakowany i niezgodny ze standardami sposób , nie zaleca się używania z nim<img> !
Świetna metoda kandydacka, patrz wnioski ...
CSS1 „s
background-image:nieruchomości:
Pierwsza rekomendacja W3C: Cascading Style Sheets, poziom 1 17 grudnia 1996
Ta właściwość ustawia obraz tła elementu. Ustawiając obraz tła, należy również ustawić kolor tła, który będzie używany, gdy obraz będzie niedostępny. Gdy obraz jest dostępny, jest nakładany na kolor tła.
Ta właściwość istnieje od początku CSS, ale mimo to zasługuje na chwalebną wzmiankę.
Domyślny rendering: Rozmiar oryginału (nie można go skalować, tylko pozycjonować)
Jednakże ,
CSS3 „s background-size:nieruchomość poprawiła na nim, pozwalając wiele opcji skalowania:
Najnowszy status W3C: Rekomendacje dla kandydatów CSS Tła i granice Moduł Poziom 3 9 września 2014 r
[length> | <percentage> | auto ]{1,2} | cover | contain
Ale nawet w przypadku tej właściwości zależy to od wielkości pojemnika.
Nadal dobra metoda kandydująca, patrz wnioski ...
CSS2 „s list-style:nieruchomość wraz z display: list-item:
Pierwsza rekomendacja W3C: Kaskadowe arkusze stylów, specyfikacja CSS2 poziomu 2, 12 maja 1998 r
list-style-image: ustawia obraz, który będzie używany jako znacznik elementu listy (punktor)
Właściwości listy opisują podstawowe wizualne formatowanie list: pozwalają arkuszom stylów określić typ znacznika ( obraz , glif lub liczba)
display: list-item- Ta wartość powoduje, że element (np. <li>W HTML) generuje pole bloku głównego i pole znacznika.
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
Stenografia CSS: ( <list-style-type> <list-style-position> <list-style-image>)
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
Domyślne renderowanie: Rozmiar oryginału (nie zależy od wyraźnej deklaracji rozmiaru)
Ograniczenia:
Dziedziczenie przeniesie wartości typu listy z elementów OL i UL do elementów LI. Jest to zalecany sposób określania informacji o stylu listy.
Nie pozwalają autorom określać odrębnego stylu (kolorów, czcionek, wyrównania itp.) Znacznika listy ani zmieniać jego pozycji
Ta metoda jest również nieodpowiednia dla <img>tagu, ponieważ nie można dokonać konwersji między typami elementów, a oto ograniczony, niezgodny hack , który nie działa w Chrome.
Dobra metoda kandydacka, patrz wnioski ...
CSS3 „s border-image:nieruchomość zalecenie :
Najnowszy status W3C: Rekomendacje dla kandydatów CSS Tła i granice Moduł Poziom 3 9 września 2014 r
Tło typu metoda, która opiera się na określenie rozmiarów w dość osobliwy sposób (nie zdefiniowane dla tego przypadku użycia) i zastępczych właściwościach granicznych tej pory (np. border: solid):
Należy pamiętać, że nawet jeśli nigdy nie powodują one mechanizmu przewijania, obrazy początkowe mogą być nadal przycinane przez przodka lub przez rzutnię.
Ten przykład ilustruje kompozycję obrazu jedynie jako dekorację w prawym dolnym rogu :
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
Dotyczy: wszystkich elementów, z wyjątkiem wewnętrznych elementów tabeli, kiedy border-collapse: collapse
Nadal nie można zmienić wykonania <img>„s tag src(ale tutaj jest hack ), zamiast tego możemy go ozdobić:
.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"
Dobra metoda kandydująca do rozważenia po rozpowszechnieniu standardów.
CSS3 „s element()zapis projekt pracy warto wspomnieć również:
Uwaga: element()Funkcja odtwarza jedynie wygląd przywoływanego elementu, a nie rzeczywistą treść i jego strukturę.
<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">
Użyjemy wyrenderowanej zawartości jednego z dwóch ukrytych obrazów, aby zmienić tło obrazu w #img1oparciu o Selektor ID za pomocą CSS:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
Uwagi: Jest eksperymentalny i działa tylko z -mozprefiksem w Firefoksie i tylko nad backgroundlub background-imagewłaściwościami, wymaga także określonych rozmiarów.
Wnioski
- Wszelkie treści semantyczne lub informacje strukturalne są w formacie HTML.
- Informacje o stylizacji i prezentacji znajdują się w CSS.
- Dla celów SEO nie ukrywaj znaczących obrazów w CSS.
- Grafika w tle jest zwykle wyłączona podczas drukowania.
- Niestandardowe tagi mogą być używane i stylizowane z CSS, ale prymitywne wersje Internet Explorera nie rozumieją] ( IE nie stylizuje tagów HTML5 (z shiv) ) bez wskazówek Javascript lub CSS .
- Zasadniczo w SPA (aplikacje pojedynczej strony) z reguły włączane są obrazy w tle
Powiedziawszy to, przyjrzyjmy się tagom HTML odpowiednim do wyświetlania obrazu:
<li>Elementem [HTML4.01 +]
Idealne zastosowanie list-style-imagez display: list-itemmetodą.
<li>Element może być pusta, umożliwia przepływ treści i to nawet wolno pominąć </li>znacznik końcowy.
.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>
Ograniczenia: trudne do stylu ( width:lub float:może pomóc)
<figure>Elementem [HTML5 +]
Element ryciny reprezentuje pewną treść przepływu, opcjonalnie z podpisem, który jest samodzielny (jak całe zdanie) i zwykle jest określany jako pojedyncza jednostka z głównego przepływu dokumentu.
Element jest prawidłowy bez treści, ale zaleca się, aby zawierał <figcaption>.
Element można zatem wykorzystać do opisywania ilustracji, diagramów, zdjęć , list kodów itp.
Domyślne renderowanie: element jest wyrównany do prawej, z dopełnieniem zarówno do lewej, jak i prawej strony!
<object>Elementem [HTML4 +]
Aby dołączyć obrazy, autorzy mogą użyć elementu OBJECT lub IMG.
Ten dataatrybut jest wymagany i może mieć poprawny typ MIME jako wartość!
<object data="data:x-image/x,"></object>
Uwaga: sztuczką w użyciu <object>tagu z CSS byłoby ustawienie niestandardowego prawidłowego typu MimeType, x-image/xpo którym nie ma danych (wartość nie zawiera danych po wymaganym przecinku ,)
Domyślny rendering: 300 x 150 pikseli, ale rozmiar można określić w HTML lub CSS.
Potrzebuje przeglądarki obsługującej SVG i zawiera <image>element do obrazów rastrowych
<canvas>Elementem [HTML5 +].
Te widthwartości domyślne atrybut do 300 , i heightdomyślne atrybut do 150 .
<input>Element otype="image"
Ograniczenia:
... element powinien wyglądać jak przycisk, wskazując, że element jest przyciskiem.
które Chrome podąża i wyświetla pusty kwadrat 4x4px, gdy nie ma tekstu
Częściowe rozwiązanie, zestaw value=" ":
<input type="image" id="img1" value=" ">
Uważaj również na nadchodzący <picture>element w HTML5.1 , obecnie działający projekt .