Можно ли задать атрибут src тега img в CSS?
Невозможно установить значение атрибута src в CSS?
Здравствуйте! Я сталкиваюсь с проблемой, связанной с установкой значения атрибута src для элемента <img> с помощью CSS. В большинстве случаев мы используем его в HTML следующим образом:
<img src="pathTo/myImage.jpg" />
Однако я хотел бы сделать это по-другому и использовать CSS класс, чтобы задать изображение так:
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
Интересно, есть ли способ сделать это без использования свойств background или background-image в CSS? Буду благодарен за любую информацию по этому вопросу!
5 ответ(ов)
Вы можете использовать решение с пустым <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> следующим образом:
<div id="throbber"></div>
Это создаст элемент с заданным фоновым изображением, который будет отображать анимацию загрузки. Убедитесь, что путь к изображению указан правильно, чтобы иконка загружалась без проблем.
Да, они правы. IMG является элементом контента, а CSS относится к дизайну. Однако что делать, если вы используете некоторые элементы или свойства контента для дизайнерских целей?
У меня на веб-страницах есть изображения (IMG), которые должны изменяться при изменении стилей (CSS).
Есть решение, позволяющее задать представление IMG (но не само изображение) в CSS:
- Создайте прозрачный GIF или PNG размером 1x1 пиксель.
- Установите свойство "src" для IMG на это изображение.
- Определите окончательное представление с помощью "background-image" в CSS.
Это работает отлично 😃
Вы можете определить два изображения в вашем HTML-коде и использовать стиль display: none; для того, чтобы определить, какое из них будет видно. Вот пример, как это можно реализовать:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример изображений</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<img src="image1.jpg" alt="Изображение 1" class="visible">
<img src="image2.jpg" alt="Изображение 2" class="hidden">
<button onclick="toggleImages()">Сменить изображение</button>
<script>
function toggleImages() {
const image1 = document.querySelector('img[src="image1.jpg"]');
const image2 = document.querySelector('img[src="image2.jpg"]');
if (image1.classList.contains('hidden')) {
image1.classList.remove('hidden');
image2.classList.add('hidden');
} else {
image1.classList.add('hidden');
image2.classList.remove('hidden');
}
}
</script>
</body>
</html>
В этом примере, изначально одно изображение скрыто с помощью класса hidden. При нажатии на кнопку Сменить изображение происходит переключение видимости между двумя изображениями.
В вашем вопросе вы показываете, как использовать фоновое изображение в CSS с помощью класса .myClass. Если вам нужно альтернативное решение для отображения изображения загрузки, вы можете использовать элемент <img> вместо задания фонового изображения через CSS. Вот пример:
<div class="loading-container">
<img src="/img/loading_big.gif" alt="Loading..." />
</div>
И в CSS вы можете добавить стили для контейнера, если это необходимо:
.loading-container {
display: flex; /* Центрирование по вертикали и горизонтали */
justify-content: center; /* Горизонтальное выравнивание */
align-items: center; /* Вертикальное выравнивание */
height: 100vh; /* Высота на всю страницу */
}
Таким образом, этот подход не только отображает изображение загрузки, но и позволяет вам управлять его размещением с помощью HTML и CSS.
На данный момент, насколько я знаю, ЭТО НЕЛЬЗЯ сделать. CSS отвечает за стилизацию, а атрибут src изображения относится к содержимому.
Как автоматически изменять размер изображения с сохранением пропорций
Получить координаты (X,Y) HTML-элемента
Как создать ненумерованный список без маркеров?
Стилизация кнопки input type="file"
Изменение цвета элемента hr