Колекція можливих методів встановлення зображень із CSS
CSS2 «s:after псевдо-елемент або новий синтаксис ::afterз CSS3 разом з content:майном:
Перша рекомендація W3C: Каскадні таблиці стилів, рівень 2 Специфікація CSS2 12 травня 1998 р.
Остання рекомендація W3C: Вибірці 3 рівень Рекомендація W3C 29 вересня 2011 р.
Цей метод додає вміст відразу після вмісту дерева елемента документа.
Примітка: деякі браузери експериментально надають contentвластивість безпосередньо над деякими селекторами елементів, не зважаючи навіть на останню рекомендацію W3C, яка визначає:
Застосовується до: :beforeта :afterпсевдоелементів
Синтаксис CSS2 (сумісний вперед):
.myClass:after {
content: url("somepicture.jpg");
}
CSS3 Selector:
.myClass::after {
content: url("somepicture.jpg");
}
Відображення за замовчуванням: Розмір оригіналу (не залежить від явного оголошення розміру)
Ця специфікація не повністю визначає взаємодію: до та: після із заміненими елементами (наприклад, IMG в HTML). Це буде визначено більш детально в майбутній специфікації.
але навіть під час написання цього тексту поведінка з <IMG>тегом все ще не визначена, і хоча вона може використовуватися в зламаному та нестандартному вигляді , використання з <img>не рекомендується !
Чудовий метод кандидата, дивіться висновки ...
CSS1 «S
background-image:власності:
Перша рекомендація W3C: Каскадні таблиці стилів, рівень 1 17 грудня 1996 року
Це властивість задає фонове зображення елемента. Під час встановлення фонового зображення слід також встановити колір тла, який буде використовуватися, коли зображення недоступне. Коли зображення доступне, воно накладається поверх кольору фону.
Цей об'єкт існує з початку CSS, але він заслуговує на славну згадку.
Відображення за замовчуванням: Розмір оригіналу (не можна масштабувати, розміщувати лише)
Однак ,
CSS3 «sbackground-size: власності на нього покращився, дозволяючи кілька варіантів масштабування:
Останній статус W3C: Рекомендація щодо кандидата CSS Фони та межі модуля 3 рівень 9 вересня 2014 року
[length> | <percentage> | auto ]{1,2} | cover | contain
Але навіть з цією властивістю це залежить від розміру контейнера.
Ще хороший метод кандидата, дивіться висновки ...
list-style:Власність CSS2 , а такожdisplay: list-item :
Перша рекомендація W3C: Каскадні таблиці стилів, рівень 2 Специфікація CSS2 12 травня 1998 року
list-style-image: властивість встановлює зображення, яке буде використовуватися як маркер елемента списку (куля)
Властивості списку описують основне візуальне форматування списків: вони дозволяють аркушам стилів визначати тип маркера ( зображення , гліф або число)
display: list-item- Це значення призводить до того, що елемент (наприклад, <li>у HTML) генерує головне блок-поле та поле маркера.
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
Скорочений CSS: ( <list-style-type> <list-style-position> <list-style-image>)
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
Відображення за замовчуванням: Розмір оригіналу (не залежить від явного оголошення розміру)
Обмеження:
Спадкування передасть значення "стилю списку" з елементів OL та UL в елементи LI. Це рекомендований спосіб вказати інформацію про стиль списку.
Вони не дозволяють авторам вказувати виразний стиль (кольори, шрифти, вирівнювання тощо) для маркера списку або коригувати його положення
Цей метод також не підходить для <img>тегу, оскільки перетворення не може бути здійснено між типами елементів, і ось обмежений невідповідний хак , який не працює в Chrome.
Хороший метод кандидата, дивіться висновки ...
CSS3 «S border-image:властивість рекомендації :
Останній статус W3C: Рекомендація щодо кандидата CSS Фони та межі модуля 3 рівень 9 вересня 2014 року
Фон типу метод , який заснований на визначення розмірів в досить своєрідній манері (не визначена для даного випадку використання) і резервного властивості кордонів до сих пір (наприклад. border: solid):
Зауважте, що, хоча вони ніколи не викликають механізм прокрутки, вихідні зображення все ще можуть бути вирізані предком або вікном перегляду.
Цей приклад ілюструє зображення, складене лише як прикраса в нижньому правому куті :
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
Застосовується до: Усі елементи, крім внутрішніх елементів таблиці, коли border-collapse: collapse
Тим НЕ менше він не може змінити давав <img>тег «S src(але ось хак ), замість цього ми можемо прикрасити його:
.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"
Хороший метод кандидата, який слід врахувати після поширення стандартів.
CSS3 «сек element()нотація робочий проект варто згадати також:
Примітка. element()Функція відтворює лише зовнішній вигляд посилального елемента, а не власне вміст та його структуру.
<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">
Ми будемо використовувати відображений вміст одного з двох прихованих зображень для зміни фону зображення на #img1основі селектора ідентифікаторів за допомогою CSS:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
Примітки. Це експериментально і працює лише з -mozпрефіксом у Firefox і лише над backgroundабо background-imageвластивостями, а також потрібні вказані розміри.
Висновки
- Будь-яка смислова зміст або структурна інформація йде в HTML.
- Інформація про стилі та презентацію надходить у CSS.
- Для цілей SEO не ховайтесь змістовні зображення в CSS.
- Фонова графіка зазвичай вимикається під час друку.
- Користувацькі теги можна використовувати та стилізувати з CSS, але примітивні версії Internet Explorer не розуміють] ( IE не стилює теги HTML5 (з shiv) ) без вказівки Javascript або CSS .
- SPA-програми (Single Page Applications) за дизайном зазвичай містять зображення у фоновому режимі
Сказавши це, давайте вивчимо теги HTML, придатні для відображення зображення:
The <li>Елемент [HTML4.01 +]
Ідеальний футляр для list-style-imageсdisplay: list-item методом.
<li>Елемент, може бути порожнім, дозволяє зміст потоку , і це навіть дозволяється опускати </li>кінцевий тег.
.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>
Обмеження: важко стильно ( width:або float:може допомогти)
<figure>Елемент [HTML5 +]
Фігурний елемент являє собою деякий вміст потоку, необов'язково з підписом, який є самостійним (як повне речення) і, як правило, посилається як одна одиниця від основного потоку документа.
Елемент дійсний без вмісту, але рекомендується містити <figcaption>.
Таким чином, елемент може використовуватися для анотування ілюстрацій, діаграм, фотографій , списків кодів тощо.
Відображення за замовчуванням: елемент вирівнюється праворуч, з лівою та правою накладками!
<object>Елемент [HTML4 +]
Для включення зображень автори можуть використовувати елемент OBJECT або елемент IMG.
dataАтрибут є обов'язковим і може мати дійсний тип MIME в якості значення!
<object data="data:x-image/x,"></object>
Примітка. Трюком у використанні <object>тегу від CSS було б встановлення спеціального дійсного MimeType з x-image/xподальшим відсутністю даних (значення не має даних після потрібної коми ,)
Відображення за замовчуванням: 300 х 150 пікселів, але розмір можна вказати або в HTML, або в CSS.
Потрібен браузер, що підтримує SVG, і має <image>елемент для растрових зображень
<canvas>Елемент [HTML5 +].
В widthатрибутах по замовчуванням 300 , і heightатрибут по замовчуванням 150 .
The <input>елемент зtype="image"
Обмеження:
... очікується, що елемент з’явиться як кнопковий, що вказує на те, що елемент є кнопкою.
який Chrome дотримується і видає порожній квадрат 4х4 пікселів, коли немає тексту
Часткове рішення, встановити value=" ":
<input type="image" id="img1" value=" ">
Також слідкуйте за майбутнім <picture>елементом HTML5.1 , який зараз є робочим проектом .