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

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

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

и я хочу, чтобы это было что-то вроде этого

<img class="myClass" />
.myClass {
    some-src-property: url("pathTo/myImage.jpg");

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

+464
источник поделиться
24 ответа

Используйте 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
  • Opera 10.6

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

  • FireFox 40.0.2 (наблюдая за инструментами Network Developer Network, вы можете видеть, что URL-адрес загружается, но изображение не отображается)
  • Internet Explorer 11.0.9600.17905 (URL никогда не загружается)
+767
источник

Есть решение, которое я нашел сегодня (работает в 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

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

+172
источник

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


CSS2 :after псевдоэлемент или более новый синтаксис ::after из CSS3 вместе с content: property:

Первая рекомендация 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");
}

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

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

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

Отличный метод выбора, смотрите выводы...



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

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

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

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

Рендеринг по умолчанию: Исходный размер (не масштабируется, только позиционируется)

Тем не мение,

CSS3 background-size: улучшено свойство, позволяющее использовать несколько вариантов масштабирования:

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

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

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

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



CSS2 list-style: свойство вместе с 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");
}

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

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

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

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

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

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



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

Последний статус W3C: Кандидатская рекомендация CSS Backgrounds and Borders Модуль Уровень 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> 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 метод display: list-item.

Элемент <li> может быть пустым, разрешать содержимое потока и даже разрешать пропускать </li> end.

.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 состоит в том, чтобы установить пользовательский допустимый MimeType x-image/x за которым не следует никаких данных (значение не имеет данных после запятой ,)

Рендеринг по умолчанию: 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, в настоящее время работающий проект.

+99
источник

Я использовал пустое решение 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>
+23
источник

Я нашел лучший способ, чем предлагаемые решения, но действительно использует фоновое изображение. Соответствующий метод (не может подтвердить 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 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 */

}
+14
источник

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

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

  • создать прозрачный gif или png 1x1.
  • Назначьте "src" IMG этому изображению.
  • Определить финальную презентацию с помощью "фонового изображения" в стиле CSS.

Он работает как шарм:)

+13
источник

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

+9
источник

Вот очень хорошее решение → http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro и Кон (ы):
(+) работает с векторным изображением, имеющим относительную ширину/высоту (вещь, которая RobAu отвечает не обрабатывать)
(+) - кросс-браузер (работает также для IE8 +)
(+) он использует только CSS. Поэтому нет необходимости изменять img src (или если у вас нет доступа/не хотите изменять уже существующий атрибут img src).
(-) извините, он использует атрибут css для фона:)

+9
источник

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

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

+7
источник

Поместите несколько изображений в "управляющий" контейнер и вместо этого замените класс контейнера. В 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.

+4
источник

Насколько я знаю, ВЫ НЕ МОЖЕТЕ. CSS - это стиль и изображение. Src - это контент.

+3
источник

Некоторые данные я бы оставил в HTML, но лучше определить src в CSS:

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}
+3
источник

Альтернативный способ

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
+2
источник

Повторить предыдущее решение и подчеркнуть чистую реализацию CSS, вот мой ответ.

Чистое решение CSS необходимо в тех случаях, когда вы используете контент с другого сайта, и, таким образом, у вас нет контроля над поставляемым HTML. В моем случае я пытаюсь удалить брендинг лицензионного исходного контента, чтобы лицензия не должна рекламировать компанию, с которой они покупают контент. Поэтому я удаляю их логотип, сохраняя все остальное. Я должен отметить, что это в рамках моего клиентского контракта.

{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
+2
источник

Я знаю, что это действительно старый вопрос, однако ни один из ответов не дает правильных аргументов в пользу того, почему это невозможно сделать. Хотя вы можете "делать" то, что вы ищете, вы не можете сделать это действительным образом. Чтобы иметь действительный тег img, должен иметь атрибуты src и alt.

Таким образом, любой из ответов, дающих способ сделать это с помощью тега img, который не использует атрибут src, способствует использованию недопустимого кода.

Короче: то, что вы ищете, не может быть сделано законным образом в структуре синтаксиса.

Источник: W3 Validator

+2
источник

Или вы могли бы сделать это, что я нашел на паутине.

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">
.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

Так эффективно скрывает изображение и накладывает фон. О, что за хак, но если вам нужен тег IMG с альтернативным текстом и фоном, который можно масштабировать без использования JavaScript?

В проекте, над которым я сейчас работаю, я создал шаблон веточки героя

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
+2
источник

Если вы не хотите устанавливать свойство фона, вы не можете установить атрибут src изображения, используя только CSS.

В качестве альтернативы вы можете использовать JavaScript для выполнения такой задачи.

+1
источник

Используя CSS, он не может. Но если вы используете JQuery, что-то вроде этого будет делать трюк:

$("img.myClass").attr("src", "http://somwhere");
+1
источник

Вы можете преобразовать его с помощью JS:

$('.image-class').each(function(){
    var processing = $(this).attr('src');
    $(this).parent().css({'background-image':'url('+processing+')'});
    $(this).hide();
});
+1
источник

Если вы пытаетесь добавить изображение в кнопку динамически в зависимости от контекста вашего проекта, вы можете использовать? чтобы ссылаться на источник на основе результата. Здесь я использую проект mvvm, чтобы мое значение Model.Phases [0] определяло, хочу ли я, чтобы моя кнопка была заполнена изображениями лампочки вкл или выкл на основе значения световой фазы.

Не уверен, что это помогает. Я использую JqueryUI, Blueprint и CSS. Определение класса должно позволить вам стилизовать кнопку на основе того, что вы хотите.

    <button>                           
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>                             
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>   
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>     

0
источник

Я бы добавил следующее: фоновое изображение может быть также расположено с background-position: x y; (x по горизонтали y по вертикали). (..) Мой случай, CSS:

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)
0
источник

HTMl Код:

<!DOCTYPE html>
<html>
     <head>
         <link type="text/css" rel="stylesheet" href="css destination" />
     </head>
     <body>
<!-- click-able pic with link -->
           <a href="site you want"> 
<!-- Take the off if you don't want click-able link -->
                <h1 id(or class)="nameOfClassorid">
                     <span>Text that is not important</span>
                </h1>
           </a>
      </body>
 </html>

Код Css:

span {
     display: none;
}
h1 id or class {
     height: of pic;
     width: of pic;
/* Only flaw (so far) read bottom */
     background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
     background-image:url(/* 'new background!!!' */);
}

Я изучал html после школы в течение нескольких дней и хотел знать, как это сделать. Обнаружили фон, а затем положили 2 и 2 вместе. Это работает 100%, я проверил, если не убедитесь, что вы заполняете необходимые вещи!!! Нам нужно указать высоту, потому что без нее не было бы ничего!!! Я оставлю эту базовую оболочку, которую вы можете добавить.

Пример:

 <!DOCTYPE html>
 <html>
     <head>
         <link type="text/css" rel="stylesheet" href="style.css" />
     </head>
     <body>
           <a href="http:localhost"> 
                <h1>
                     <span>Text that is not important</span>
                </h1>
           </a>
     </body>
 </html>
span {
     display: none;
}
h1 {
     height: 100px;
     width: 100px;
     background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/[email protected]");
}

h1:hover {
     height: 300px;
     width: 300px;
     background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

P.S. Да, я пользователь Linux;)

0
источник

Любой метод, основанный на background или background-image, скорее всего, не сработает, когда пользователь распечатает документ с цветами "print background и изображения" отключено. К сожалению, типичный браузер по умолчанию.

Единственным удобным для печати и кросс-браузером способом является тот, который предлагается Bronx.

0
источник

Просто используйте HTML5:)

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
-2
источник

Посмотрите другие вопросы по меткам или Задайте вопрос