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

533

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

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

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

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

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

html  css  image 
— Ракеш Джуял
источник
1
Это, очевидно, станет возможным в CSS3: w3.org/TR/css3-values/#attribute
— graphicdivine
7
Теперь это возможно. Протестировано на Chrome / Safari / Opera: stackoverflow.com/a/11484688/632951
— Pacerier
2
Но FireFox 30.0, Internet Explorer 11.0 не поддерживает
— Laxmikant Dange
Это единственное решение CSS работало для меня (во всех браузерах): stackoverflow.com/a/19114098/448816 , за исключением того, что я должен был добавить: 'background-size: 100%;'.
— Михаил-т
(2020) Вы можете сделать это с помощью JS, getPropertyValue("--src")см .: jsfiddle.net/CustomElementsExamples/vjfpu3a2
— Дэнни '365CSI' Энгельман,

Ответы:

882

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

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

<!doctype html>

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

<img class="MyClass123"/>
Развернуть фрагмент

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

  • Хром 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 никогда не загружается)
— Pacerier
источник
7
@gotqn, пока только Chrome Safari Opera.
— Пейсер
36
@EricG, разные приложения имеют разные требования. Если это не соответствует вашим требованиям, не используйте его. Если это так, используйте его.
— Pacerier
4
Не работает IE10 - нет. Мы отказываемся от IE7 (давайте не будем говорить о IE6). IE8 тоже, если нужно. Но IE9 - IE10 ... нет.
— Рольф
11
Стоит добавить , что даже в браузерах , которые поддерживают назначение contentна imgэто меняет свое поведение. Изображение начинает игнорировать атрибуты размера, и в Chrome / Safari оно теряет параметры контекстного меню, такие как «Сохранить изображение». Это потому, что присвоение contentэффективно преобразует imgиз пустого замененного элемента в нечто подобное <span><img></span>.
— Илья Стрельцын
3
без надлежащей поддержки браузера, я не вижу это как правильный ответ, извините.
— emachine
183

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

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

— RobAu
источник
6
@RobAnu: Это работает довольно хорошо - jsfiddle
— TimPietrusky
9
Должен передать вам, что это увлекательно и умно, но пустой DIV более понятен.
— Volomike
11
В этом случае это так. Однако есть случаи, когда вы не можете контролировать HTML и хотите манипулировать IMG. Там это решение также будет работать
— RobAu
2
Если изображение имеет srcатрибут, это метод, который вам нужен. +1 - мне очень помогли
— Джеймс Лонг
3
Не ранжирование по этому ответу, что может быть решением для некоторых приложений, но этот метод имеет ограничение. Вы не можете контролировать размеры рендеринга файла изображения. При обычном использовании вы можете контролировать высоту-ширину изображения, если файл указан в источнике. Но это в основном ничем не отличается от div с фоновым изображением, где, если ваш div больше, чем изображение, вам не повезло.
— ТАРКУС
114

Коллекция возможных методов установки изображений из 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 Selector: 

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

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

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

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

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

CSS1 «S background-image:собственности:

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

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

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

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

Тем не менее ,

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

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

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

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

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

CSS2 «S 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 «S 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>тег «S src(но вот хак ), вместо этого мы можем украсить его:

Показать фрагмент кода

Хороший метод выбора, который следует рассмотреть после распространения стандартов.

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>конечный тег.

Показать фрагмент кода

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

— CSᵠ
источник
(2020) Используйте свойства CSS: stackoverflow.com/questions/2182716/…
— Дэнни '365CSI' Энгельман,
Отличный ответ, но показывает полный провал Интернета как платформы для предоставления основных примитивов.
— serraosays
26

я использовал пустое решение 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>
— Эммануэль Тузери
источник
Что, если я хочу отобразить это в строке? При добавлении «display: inline» размер моего div
— равен
1
@elsurudo Используйте display: inline-block, если вы хотите установить ширину и высоту для встроенного элемента
— Erin Drummond
1
Главный ответ не работает с Firefox, поэтому мне больше нравится ваш ответ! И это ясно, и нет CSS-хаков.
— Сергей Богданов
Если вам необходимо отобразить более одного изображения, имейте в виду, что поле id технически должно быть уникальным, поэтому использование селектора класса CSS вместо идентификатора является идеальным.
— mix3d
Изображения этого типа не будут печататься должным образом, если в настройках печати отключена фоновая графика.
— posfan12
14

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

}
— EricG
источник
Это хитрый трюк, но действительно ли он соответствует стандартам? На странице W3C говорится, что contentсвойство применяется только к псевдоклассам :beforeи :after. Кроме того, если вам нужно поддерживать IE7 или более раннюю версию, я думаю, что contentподдержка не существует. Тем не менее, очень заманчиво.
— Джатрим
Вы правы, я только что нашел более подходящий метод. Обновление моего поста! Теперь проголосуй за меня;) Ха-ха.
— EricG
Обновленный подход определенно лучше, чем тот, который полагается на контент. Спасибо за включение оригинальной ссылки. Это было проницательно. Вы заметите, что ответ @ RobAu на самом деле очень похож на вашу обновленную версию.
— Джатрим
1
@jatrim contentСвойство применяется ко всем элементам. http://www.w3.org/TR/css3-content/#content
— XP1
13

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

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

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

Работает как часы :)

— Фрэнк
источник
5
-1 Даже если ваш ответ не плохой, он специально упоминает, что не хочет его использоватьbackground*
— fresskoma
1
это хитрость ... по моему мнению, хитрости будут изменены браузерами ... и днем ​​утром вы увидите ад на своем сайте: D :)))
— Махди Джазини
11

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

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

— OviC
источник
Теперь это правильное решение, работает для меня во всех браузерах, спасибо! Также стоит упомянуть, что мне пришлось добавить: background-size: 100%; класс CSS в решении выше, чтобы сделать замену изображения, чтобы показать правильно.
— Михаил-т
9

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

— Костас Андрианопулос
источник
Я искал решение, которое было бы адаптивным к Интернету, но также поддерживало SEO. Я хотел использовать медиа-запросы в CSS, чтобы изменить свое изображение в зависимости от используемого устройства, но я хотел сохранить свой контент в HTML. Объявление источников в CSS было маршрутом, по которому я не хотел идти, поэтому это background-imageбыл не вариант. Я хотел imgтеги для целей SEO. Ваш ответ очень прост, элегантен и решает все мои проблемы! Браво! Также пользователю не нужно загружать оба изображения. Кроме того, я могу добавить любое количество изображений.
— Ксавье
Каждый ответ, который я прочитал до сих пор, заставлял меня либо объявлять мои источники в моей таблице стилей, либо использовать встроенный CSS в моей разметке. Ни один из которых меня не порадовал. Грязный код!
— Ксавье
7

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

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

— Клетус
источник
1
почему голосование против? этот ответ является более точным, чем принятый ответ.
— harsimranb
1
Лучший ответ на данный момент: НЕТ, вы не можете сделать это с помощью CSS.
— Мильче Патерн
4

Поместите несколько изображений в «управляющий» контейнер и измените класс контейнера. В 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, но в отличие от изменения с img srcпомощью JS.

— Бронкс
источник
3

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

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

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

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

.logo {
    content:url('../images/logo.png');
}
— Ренат Гатин
источник
2

Насколько я знаю, вы не можете. CSS - это стиль, а src - это контент.

— NawaMan
источник
3
В наше время довольно часто изображения появляются только для того, чтобы придать стилистике страницу.
— Лоренцо Полидори
2
Подразумевается, что могут быть различия между изображениями, используемыми в качестве границ, фонов и т. Д., И изображениями, которые фактически являются частью содержимого страницы, т.е. диаграммы, фотографии статей и т. д.
— Рис ван дер Варден
1
ВЫ МОЖЕТЕ, и есть общие, действительные случаи, когда вы хотели бы.
— ryan0
2

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

Решение Pure 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

— Geowil
источник
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>
— Pocketninja
источник
1

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

В качестве альтернативы вы можете использовать JavaScript, чтобы сделать такую ​​вещь.

— Гийом Фландр
источник
1

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

$("img.myClass").attr("src", "http://somwhere");
— Веера
источник
на самом деле, он может)) увидеть ответ на этот же вопрос здесь: stackoverflow.com/questions/2182716/…
— mikhail-t
1

Вы можете конвертировать его с помощью JS:

$('.image-class').each(function(){
    var processing = $(this).attr('src');
    $(this).parent().css({'background-image':'url('+processing+')'});
    $(this).hide();
});
— Рауль Мартин
источник
0

Если вы пытаетесь добавить изображение в кнопку динамически в зависимости от контекста вашего проекта, вы можете использовать? принять ссылку на источник на основе результата. Здесь я использую mvvm design, чтобы позволить моему значению 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")"/>

— Tschlegel
источник
0

Я бы добавил это: фоновое изображение также можно расположить с помощью background-position: x y;(x по горизонтали и по вертикали). (..) Мой случай, 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/Ubuntu-Desktop-@-2011-01-11-191526-300x225.png");
}

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

PS Да, я пользователь Linux;)

— Z_Doctor
источник
0

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

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

— Саймон Розман
источник
0

Загрузка IMG src из определения CSS с использованием современных свойств CSS

<style>
  body {
    --imgid: 1025; /* optional default img */
  }

  .shoes {
    --imgid: 21;
  }

  .bridge {
    --imgid: 84;
  }

  img {
    --src: "//i.picsum.photos/id/"var(--imgid)"/180/180.jpg"
  }

</style>
<script>
  function loadIMG(img) {
    img.src = getComputedStyle(img)	// compute style for img
      .getPropertyValue("--src")		// get css property
      .replace(/[" ]/g, "");				// strip quotes and space
  }

</script>
<img src onerror=loadIMG(this) class=bridge>
<img src onerror=loadIMG(this) class=shoes>
<img src onerror=loadIMG(this)>
Развернуть фрагмент

  • пустое srcопределение в <IMG> запускает обработчик onerror: функция loadIMG
  • Функция loadIMG вычисляет значение CSS
  • убирает всех нелегальных персонажей
  • устанавливает IMG.src
  • когда CSS меняется, изображение НЕ обновляется! Вы должны снова позвонить loadIMG

JSFiddle: https://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

Связанные SO ответы: WCPROPS

— Дэнни '365CSI' Энгельман
источник
-2

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

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
— Максимум
источник
ОП специально стремится очистить свою HTML-разметку с помощью CSS-решения. Этот ответ только еще больше загромождает разметку.
— webaholik
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.