Можно ли установить значение атрибута src в CSS? В настоящее время я делаю следующее:
<img src="pathTo/myImage.jpg"/>
и я хочу, чтобы это было примерно так
<img class="myClass"/>
.myClass {
some-src-property: url("pathTo/myImage.jpg");
Я хочу сделать это без использования свойств background или background-image: в CSS.
Используйте content:url("image.jpg").
Полное рабочее решение (Live Demo):
<!doctype html>
<style>
.MyClass123{
content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="MyClass123"/>Проверено и работает:
Проверено и не работает:
content применяется ко всем элементам. http://www.w3.org/TR/css3-content/#content < / а>
- person XP1; 02.05.2013
content img, это меняет свое поведение. Изображение начинает игнорировать атрибуты размера, а в Chrome / Safari оно теряет такие параметры контекстного меню, как «Сохранить изображение». Это связано с тем, что присвоение content эффективно преобразует img из пустого замененного элемента во что-то вроде <span><img></span>.
- person Ilya Streltsyn; 15.07.2013
<img> с URL-адресом (например, для seo), и вы хотите перезаписать его через свойство css content:url(...), тогда будут загружены ОБА изображения, которые снова производят накладные расходы сети.
- person Timo Ernst; 12.12.2013
content:url(...). Я тестировал Google Chrome, и он загрузил оба изображения, хотя только одного было бы достаточно.
- person Timo Ernst; 16.12.2013
content применяется только к ::before и ::after . Он воскресает здесь: dev.w3.org/csswg/css-content с большое красное предупреждение с надписью «Не готов к реализации» - так что я бы не стал рассчитывать на то, что авторы в ближайшее время смогут использовать его в разных браузерах.
- person BoltClock; 31.03.2015
content:url("image.jpg"). Графики там все зеленые, но это все еще не работает для IE и FF.
- person Pacerier; 25.05.2015
Есть решение, которое я узнал сегодня (работает в IE6 +, FF, Opera, Chrome):
<img src='willbehidden.png'
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
Как это работает:
background-size, например: background-size:cover;, который помещает ваше изображение в отведенное пространство.Он также работает с изображениями отправки-ввода, они остаются интерактивными.
См. Живую демонстрацию: http://www.audenaerde.org/csstricks.html#imagereplacecss
Наслаждаться!
src, это именно то, что вам нужно. +1 - мне очень помогли
- person James Long; 21.06.2013
src.
- person Shaun Scovil; 04.02.2015
CSS2 :after псевдоэлемент или синтаксис новее _ 2_ из CSS3 вместе с _ 3_:
Первая рекомендация W3C: Каскадные таблицы стилей, уровень 2 спецификации CSS2 12 мая 1998 г.
Последняя рекомендация W3C: Рекомендация W3C для селекторов уровня 3 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> не рекомендуется!
Отличный кандидатный метод, смотрите выводы ...
background-image: свойство:
Первая рекомендация W3C: Каскадные таблицы стилей, уровень 1 17 Декабрь 1996 г.
Это свойство устанавливает фоновое изображение элемента. При установке фонового изображения следует также установить цвет фона, который будет использоваться, когда изображение недоступно. Когда изображение доступно, оно накладывается поверх цвета фона.
Это свойство существует с самого начала CSS и, тем не менее, заслуживает славного упоминания.
Визуализация по умолчанию: Исходный размер (масштабировать нельзя, только позиционирование)
Однако,
Свойство CSS3 background-size: улучшил его, разрешив несколько вариантов масштабирования:
Последний статус W3C: Кандидат в рекомендации Уровень модуля фонов и границ CSS 3 9 сентября 2014 г.
[length> | <percentage> | auto ]{1,2} | cover | contain
Но даже с этим свойством это зависит от размера контейнера.
По-прежнему хороший кандидатный метод, см. Выводы ...
list-style: в CSS2 свойство вместе с display: list-item:
Первая рекомендация W3C: Каскадные таблицы стилей, спецификация CSS2 уровня 2 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");
}
Отображение по умолчанию: Исходный размер (не зависит от явного объявления размера)
Ограничения:
# P30 #
# P31 #
Этот метод также не подходит для тега <img>, поскольку преобразование между типами элементов невозможно, а здесь ограничено, не совместимый взлом, который не работает в Chrome.
Хороший кандидатский метод, смотрите выводы ...
Свойство CSS3 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> 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"Хороший кандидатный метод, который следует рассмотреть после распространения стандартов.
Нотация element() в CSS3 рабочий проект заслуживает упоминания:
Примечание. Функция
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-теги, подходящие для отображения изображений:
<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 заключается в установке настраиваемого действительного MimeType x-image/x с последующим отсутствием данных (значение не имеет данных после требуемой запятой ,)
Рендеринг по умолчанию: 300 x 150 пикселей, но размер можно указать в HTML или CSS.
<SVG>Требуется браузер с поддержкой SVG и _ 57_ элемент для растровых изображений
<canvas> [HTML5 +].Атрибут
widthпо умолчанию равен 300, а атрибутheight- 150.
<input> с type="image"Ограничения:
... ожидается, что элемент будет похож на кнопку, чтобы указать, что элемент является кнопкой.
Chrome следует за ним и отображает пустой квадрат 4x4px, когда нет текста
Частичное решение, установите value=" ":
<input type="image" id="img1" value=" ">
Также обратите внимание на предстоящий элемент <picture> в HTML5.1, в настоящее время это рабочий проект.
Я использовал пустое решение 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>
Я нашел способ лучше, чем предлагаемые решения, но он действительно использует фоновое изображение. Соответствующий метод (невозможно подтвердить для 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 */
}
content применяется только к :before и :after псевдоклассы. Кроме того, если вам нужно поддерживать IE7 или более раннюю версию, я думаю, content поддержки не существует. Тем не менее, очень заманчиво.
- person jatrim; 01.06.2012
content применяется ко всем элементам. http://www.w3.org/TR/css3-content/#content < / а>
- person XP1; 02.05.2013
Они правы. IMG - это элемент контента, а CSS - это дизайн. Но как насчет того, чтобы использовать некоторые элементы или свойства контента в целях дизайна? У меня есть IMG на моих веб-страницах, которые должны измениться, если я изменю стиль (CSS).
Что ж, это решение для определения представления IMG (на самом деле не изображения) в стиле CSS.
Работает как часы :)
background*
- person fresskoma; 12.08.2011
Вот очень хорошее решение -> http://css-tricks.com/replace-the-image-in-an-img-with-css/
За и против:
( +) работает с векторными изображениями, имеющими относительную ширину / высоту (то, что RobAu answer не обрабатывает)
(+) кросс-браузер (работает также для IE8 +)
(+) он использует только CSS. Поэтому нет необходимости изменять img src (или если у вас нет доступа / вы не хотите изменять уже существующий атрибут img src).
(-) извините, он действительно использует фоновый атрибут css :)
Вы можете определить 2 изображения в своем HTML-коде и использовать display: none;, чтобы решить, какое из них будет видно.
background-image не подходил. Мне нужны img теги для SEO. Ваш ответ такой простой, элегантный и решает все мои проблемы! Браво! Также пользователю не нужно загружать оба изображения. Кроме того, я могу добавить любое количество изображений.
- person Xavier; 25.01.2019
Нет, вы не можете установить атрибут изображения src через CSS. Самое близкое, что вы можете получить, это, как вы говорите, background или background-image. В любом случае я бы не рекомендовал это делать, поскольку это было бы несколько нелогично.
Однако вам доступно решение CSS3, если браузеры, на которые вы нацелены, могут его использовать. Используйте content:url , как описано в Pacerier's ответ. Вы можете найти другие кросс-браузерные решения в других ответах ниже.
Поместите несколько изображений в «управляющий» контейнер и вместо этого измените класс контейнера. В 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-images, но в отличие от изменения img src с помощью JS.
Альтернативный способ
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
Некоторые данные я бы оставил в HTML, но лучше определить src в CSS:
<img alt="Test Alt text" title="Title text" class="logo">
.logo {
content:url('../images/logo.png');
}
Насколько мне известно, ВЫ НЕ МОЖЕТЕ. CSS - это стиль, а src изображения - это контент.
Чтобы повторить предыдущее решение и подчеркнуть реализацию чистого 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);
}
Я знаю, что это действительно старый вопрос, однако никакие ответы не дают правильного объяснения, почему это никогда не может быть сделано. Хотя вы можете «делать» то, что ищете, вы не можете делать это правильным образом. Чтобы иметь действительный тег img, он должен иметь атрибуты src и alt.
Таким образом, любой из ответов, позволяющих сделать это с помощью тега img, который не использует атрибут src, способствует использованию недопустимого кода.
Вкратце: то, что вы ищете, не может быть выполнено на законных основаниях в рамках структуры синтаксиса.
Источник: W3 Validator
Или вы можете сделать это, что я нашел в сети.
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>
Если вы не хотите устанавливать свойство фона, вы не можете установить атрибут src изображения, используя только CSS.
В качестве альтернативы вы можете использовать JavaScript для этого.
Используя CSS, это невозможно сделать. Но, если вы используете JQuery, что-то вроде этого поможет:
$("img.myClass").attr("src", "http://somwhere");
Вы можете преобразовать его с помощью JS:
$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
Если вы пытаетесь добавить изображение на кнопку динамически в зависимости от контекста вашего проекта, вы можете использовать? взять для ссылки на источник в зависимости от результата. Здесь я использую дизайн 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")"/>
Я бы добавил следующее: фоновое изображение можно также расположить с помощью 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;
(..)
}
(...)
Код 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;)
Любой метод, основанный на background или background-image, скорее всего, не сработает, когда пользователь распечатает документ с отключенными «печать цветов фона и изображений». К сожалению, это типичный браузер по умолчанию.
Единственный удобный для печати и кросс-браузерный метод здесь - это метод, предложенный Bronx.
<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› запускает обработчик ошибки: функция loadIMGПросто используйте HTML5 :)
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>
getPropertyValue("--src")см. jsfiddle.net/CustomElementsExamples/vjfpu3a2 - person Danny '365CSI' Engelman schedule 13.03.2020