Можно ли установить значение атрибута 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"/>Есть решение, которое я нашел сегодня (работает в 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
Наслаждайтесь!
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> не рекомендуется !
Отличный метод выбора, смотрите выводы...
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"Я использовал пустое решение 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 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 */
}
Они правы. IMG - элемент контента, а CSS - дизайн. Но как насчет того, когда вы используете некоторые элементы контента или свойства для целей дизайна? У меня есть IMG на моих веб-страницах, которые должны меняться, если я изменяю стиль (CSS).
Ну, это решение для определения презентации IMG (на самом деле не изображение) в стиле CSS.
Он работает как шарм:)
Вы можете определить 2 изображения в своем HTML-коде и использовать display: none;, чтобы определить, какой из них будет видимым.
Вот очень хорошее решение → http://css-tricks.com/replace-the-image-in-an-img-with-css/
Pro и Кон (ы):
(+) работает с векторным изображением, имеющим относительную ширину/высоту (вещь, которая RobAu отвечает не обрабатывать)
(+) - кросс-браузер (работает также для IE8 +)
(+) он использует только CSS. Поэтому нет необходимости изменять img src (или если у вас нет доступа/не хотите изменять уже существующий атрибут img src).
(-) извините, он использует атрибут css для фона:)
Нет, вы не можете установить атрибут src изображения через CSS. Самое близкое, что вы можете получить, это, как вы говорите, background или background-image. Я бы не рекомендовал это делать так, как это было бы несколько нелогично.
Однако для вас доступно решение CSS3, если браузеры, на которые вы настроили таргетинг, могут его использовать. Используйте content:url как описано в ответе Pacerier. Вы можете найти другие, кросс-браузерные решения в других ответах ниже.
Поместите несколько изображений в "управляющий" контейнер и вместо этого замените класс контейнера. В 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.
Насколько я знаю, ВЫ НЕ МОЖЕТЕ. CSS - это стиль и изображение. Src - это контент.
Некоторые данные я бы оставил в HTML, но лучше определить src в CSS:
<img alt="Test Alt text" title="Title text" class="logo">
.logo {
content:url('../images/logo.png');
}
Альтернативный способ
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
Повторить предыдущее решение и подчеркнуть чистую реализацию 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, скорее всего, не сработает, когда пользователь распечатает документ с цветами "print background и изображения" отключено.
К сожалению, типичный браузер по умолчанию.
Единственным удобным для печати и кросс-браузером способом является тот, который предлагается Bronx.
Просто используйте HTML5:)
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>