Можно ли установить эквивалент атрибута src тега img в CSS? - PullRequest
Новая
       24

Можно ли установить эквивалент атрибута src тега img в CSS?

479 голосов
/ 02 февраля 2010

Можно ли установить значение атрибута src в CSS? В настоящее время я занимаюсь: 

<img src="pathTo/myImage.jpg"/>

и я хочу что-то вроде этого 

<img class="myClass" />

.myClass {
    some-src-property: url("pathTo/myImage.jpg");

Я хочу сделать это без , используя свойства background или background-image: в CSS.

Ответы [ 24 ]

795 голосов
/ 14 июля 2012

Использование content:url("image.jpg").

Полное рабочее решение ( Live Demo ): 

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

Проверено и работает:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Опера 10,6

Проверено и Не Работает:

  • FireFox 40.0.2 (наблюдая за Developer Network Tools, вы можете видеть, что URL загружается, но изображение не отображается)
  • Internet Explorer 11.0.9600.17905 (URL не загружается)
174 голосов
/ 20 апреля 2012

Есть решение, которое я нашел сегодня (работает в IE6 +, FF, Opera, Chrome): 

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

Как это работает:

  • Изображение уменьшается до тех пор, пока оно не станет видимым по ширине и высоте.
  • Затем вам нужно «сбросить» размер изображения с отступом. это один дает изображение 16x16. Конечно, вы можете использовать padding-left / padding-top для создания прямоугольных изображений.
  • Наконец, новое изображение помещается туда с использованием фона.
  • Если новое фоновое изображение слишком большое или слишком маленькое, я рекомендую использовать background-size, например: background-size:cover;, который помещает ваше изображение в выделенное пространство.

Это также работает для изображений ввода-ввода, они остаются активными.

Посмотреть демо-версию: http://www.audenaerde.org/csstricks.html#imagereplacecss

Наслаждайтесь!

101 голосов
/ 31 марта 2015

Коллекция возможных методов установки изображений из CSS

CSS2 * :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: 

.myClass::after {
  content: url("somepicture.jpg");
}

Рендеринг по умолчанию: Исходный размер (не зависит от явного объявления размера)

Эта спецификация не полностью определяет взаимодействие: before и: after с замененными элементами (такими как IMG в HTML). Это будет определено более подробно в будущей спецификации.

, но даже на момент написания этой статьи поведение с тегом <IMG> все еще не определено, и хотя его можно использовать взломанным и не соответствующим стандартам , использование с <img> не рекомендуется !

Отличный метод-кандидат, см. Выводы ...

CSS1 background-image: свойство:

Первая рекомендация W3C: Каскадные таблицы стилей, уровень 1 17 декабря 1996

Это свойство устанавливает фоновое изображение элемента. При настройке фонового изображения также следует установить цвет фона, который будет использоваться, когда изображение недоступно. Когда изображение доступно, оно накладывается поверх цвета фона.

Это свойство существует с самого начала CSS и, тем не менее, оно заслуживает славного упоминания.

Рендеринг по умолчанию: Размер оригинала (невозможно масштабировать, только позиционировать)

Однако ,

CSS3 's background-size: улучшено свойство, благодаря возможности нескольких вариантов масштабирования:

Последний статус W3C: Рекомендация кандидата Модуль CSS "Фоны и границы" Уровень 3 9 сентября 2014

[length> | <percentage> | auto ]{1,2} | cover | contain

Но даже с этим свойством это зависит от размера контейнера.

Все еще хороший метод выбора, см. Выводы ...

CSS2 list-style: свойство вместе с display: list-item:

Первая рекомендация W3C: Каскадные таблицы стилей, уровень 2 Спецификация CSS2 12 мая 1998 года

list-style-image: свойство устанавливает изображение, которое будет использоваться в качестве маркера элемента списка (маркера)

Свойства списка описывают базовое визуальное форматирование списков: они позволяют таблицам стилей указывать тип маркера ( image , глиф или число)

display: list-item & mdash; Это значение заставляет элемент (например, <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");
}

Рендеринг по умолчанию: Исходный размер (не зависит от явного объявления размера)

Ограничения:

  • Наследование будет передавать значения 'list-style' из элементов OL и UL в элементы LI. Это рекомендуемый способ указания информации о стиле списка.

  • Они не позволяют авторам указывать отдельный стиль (цвета, шрифты, выравнивание и т. Д.) Для маркера списка или корректировать его положение

Этот метод также не подходит для тега <img>, поскольку преобразование не может быть выполнено между типами элементов, а вот ограниченный несовместимый хак , который не работает в Chrome.

Хороший метод-кандидат, см. Выводы ...

CSS3 border-image: свойство рекомендация :

Последний статус W3C: Рекомендация кандидата Модуль CSS Фонов и границ Уровень 3 9 сентября 2014

A background-type метод, который основывается на довольно специфичном указании размеров (не определено для этого варианта использования) и свойства отступления границы пока (напр. 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> 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, также требуются указанные размеры.

Выводы

  1. Любое семантическое содержание или структурная информация отправляются в HTML.
  2. Стилизация и презентационная информация идут в CSS.
  3. Для целей SEO не скрывать значимых изображений в CSS.
  4. Фоновая графика обычно отключается при печати. ​​
  5. Пользовательские теги можно использовать и стилизовать из CSS, но примитивные версии Internet Explorer не понимают] ( IE не стилизует теги HTML5 (с shiv) ) без Javascript или CSS руководство .
  6. SPA (одностраничные приложения), как правило, включают изображения на заднем плане

Сказав это, давайте рассмотрим теги HTML, пригодные для отображения изображений:

Элемент <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 +]

Элемент figure представляет некоторый контент потока, необязательно с заголовком, который является автономным (например, полное предложение) и на него обычно ссылаются как на одну единицу из основного потока документа.

Элемент действителен без содержимого, но рекомендуется содержать <figcaption>.

Таким образом, элемент можно использовать для аннотирования иллюстраций, диаграмм, фотографий , списков кодов и т. Д.

Рендеринг по умолчанию: элемент выровнен по правому краю с отступом влево и вправо!

Элемент <object> [HTML4 +]

Для включения изображений авторы могут использовать элемент OBJECT или элемент IMG.

Атрибут data является обязательным и может иметь допустимое значение MIME в качестве значения! 

<object data="data:x-image/x,"></object>

Примечание: хитрость в использовании тега <object> из CSS состоит в том, чтобы установить custom valid MimeType x-image/x без данных (значение не имеет данных после запятой * 1430) *)

Рендеринг по умолчанию: 300 x 150px, но размер можно указать в HTML или CSS.

Метка <SVG>

Требуется браузер с поддержкой SVG и элемент <image> для растровых изображений

Элемент <canvas> [HTML5 +].

Атрибут width по умолчанию равен 300 , а атрибут height по умолчанию 150 .

Элемент <input> с type="image"

Ограничения:

... элемент должен выглядеть как кнопка, чтобы указать, что элемент является кнопкой.

, за которым следует Chrome и визуализирует пустой квадрат 4x4px, когда нет текста

Частичное решение, установите value=" ": 

<input type="image" id="img1" value=" ">

Также обратите внимание на предстоящий элемент <picture> в HTML5.1 , в настоящее время рабочий проект .

24 голосов
/ 13 октября 2011

я использовал пустое решение div, с этим CSS: 

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

HTML: 

<div id="throbber"></div>
14 голосов
/ 25 мая 2012

Я нашел лучший способ, чем предлагаемые решения, но он действительно использует фоновое изображение. Соответствующий метод (не может подтвердить для IE6) Кредиты: http://www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

CSS: 

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

Старое изображение не видно, а новое видно, как ожидалось.


Следующее аккуратное решение работает только для webkit 

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}
13 голосов
/ 11 августа 2011

Они правы. IMG - это элемент контента, а CSS - это дизайн. Но как насчет того, когда вы используете некоторые элементы или свойства контента в целях дизайна? У меня есть IMG на моих веб-страницах, которые должны измениться, если я изменю стиль (CSS).

Ну, это решение для определения представления IMG (на самом деле это не изображение) в стиле CSS.

  1. создать прозрачный GIF или PNG размером 1x1.
  2. Присвойте этому изображению "src" IMG.
  3. Определите окончательную презентацию с "background-image" в стиле CSS.

Работает как шарм:)

10 голосов
/ 01 октября 2013

Вот очень хорошее решение -> http://css -tricks.com / replace-the-image-in-im-img-with-css / Плюсы и минусы):(+) работает с векторным изображением, имеющим относительную ширину / высоту (вещь, которую RobAu ' answer не обрабатывает)(+) является кросс-браузерным (работает также для IE8 +)(+) он использует только CSS.Поэтому нет необходимости изменять img src (или если у вас нет доступа / вы не хотите изменять уже существующий атрибут img src).(-) извините, использует атрибут background css:)

9 голосов
/ 11 марта 2013

Вы можете определить 2 изображения в своем HTML-коде и использовать display: none;, чтобы решить, какое из них будет видимым.

7 голосов
/ 02 февраля 2010

Нет, вы не можете установить атрибут изображения src через CSS. Самое близкое, что вы можете получить, это, как вы говорите, background или background-image. В любом случае, я бы не рекомендовал это делать, поскольку это было бы несколько нелогично.

Однако вам доступно решение CSS3, если браузеры, на которые вы ориентируетесь, могут его использовать. Используйте content:url , как описано в ответе Pacerier . Вы можете найти другие кросс-браузерные решения в других ответах ниже.

4 голосов
/ 10 августа 2013

Поместите несколько изображений в «управляющий» контейнер и измените класс контейнера. В CSS добавьте правила для управления видимостью изображений в зависимости от класса контейнера. Это даст тот же эффект, что и изменение свойства img src отдельного изображения.

HTML: 

<span id="light" class="red">
    <img class="red" src="red.png" />
    <img class="yellow" src="yellow.png" />
    <img class="green" src="green.png" />
</span>

CSS: 

#light         { ... }
#light         *        { display: none; }     // all images are hidden
#light.red     .red     { display: inline; }   // show red image when #light is red
#light.yellow  .yellow  { display: inline; }   // .. or yellow
#light.green   .green   { display: inline; }   // .. or green

Обратите внимание, что он будет предварительно загружать все изображения, как в CSS backround-image s, но в отличие от изменения img src через JS.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...