Картинки CSS/HTML

Картинки CSS/HTML

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

Как задать фоновое изображение в CSS

Для того, чтобы задать фоновое изображение нужно использовать свойство background для того элемента, которому нужно задать фон картинкой. Фон можно сделать повторяющимся, либо нет.

Пример

HTML


<div class="image-bg"></div>

CSS


.image-bg{
  width: 300px; /* Ширина изображения */
  height: 300px; /* Высота изображения */
  background: url(image.jpg); /* Прописываем путь к файлу */
  background-repeat: no-repeat; /* Не повторяем */
  background-size: cover; /* Размер фона */
  background-position: center; /* Позиция картинкипо центру */
}

Затемнение изображения с помощью CSS

Такой способ затемнения изображения можно использовать для элементов сайт, а так же можно оформить для фона сайта, либо для отдельных разделов сайта.

Пример

Lorem Ipsum

HTML


<div class="section-overlay"><p>Lorem Ipsum</p></div>

CSS


.section-overlay {
    background: url(image.jpg) rgba(0, 0, 0, 0.6); /* Прописываем путь к картинке и задаем цвет и прозрачность */
    background-size: cover; 
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    text-align:center; /* Текст по центру */
    color: #fff; /* Цвет текста */
    padding: 50px 0; /* Отступ сверху и снизу */
}

Как добавить картинку на сайт html с размерами

Для того чтобы добавить картинку на свою веб-страницу или сайт можно применить тег , его атрибут src содержит путь к файлу, как правило, в формате PNG, JPEG или SVG. Также для необходимо указать обязательный атрибут alt, он устанавливает альтернативный текст, который описывает содержание картинки, другими словами в него вписываем то, что отображает картинка. Размеры для изображения можно задать как в пикселях, так и в процентах, более подробно о размерах можно посмотреть на примере.

На данном примере размер картинки задан через атрибут.

Пример

HTML


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Как добавить картинку на сайт html</title>
 </head>
 <body>
  <img src="image.jpg" alt="" width="100%"/>
 </body>
</html>>

Адаптивная картинка CSS

Задать ширину изображения можно двумя способами, с помощью CSS и с помощью атрибута width элемента . Достаточно указать только ширину, высоту же браузер изменит автоматически, исходя из пропорций картинки. В некоторых случаях можно задать высоту, либо задать параметр auto. Чтобы изображение было адаптивным желательно задавать ширину в процентах.

В данном примере ширина картинки указана в пикселях, на Рис. 1 добавлен атрибут width, на Рис. 2 картинке присвоен класс и ширина задана с помощью CSS.

Пример

Рис. 1
Рис. 2

HTML


<img src="image.jpg" alt="" width="450px"/> <!-- Рис. 1 -->
<img src="image.jpg" alt="" class="image-width-px"/> <!-- Рис. 2 -->

CSS


.image-width-px{
    width: 450px; /* Рис. 2 */
}

В данном примере ширина картинки указана в процентах, на Рис. 3 добавлен атрибут width, на Рис. 4 картинке присвоен класс и ширина задана с помощью CSS.

Пример

Рис. 3
Рис. 4

HTML


<img src="image.jpg" alt="" width="100%"/> <!-- Рис. 3 -->
<img src="image.jpg" alt="" class="image-width"/> <!-- Рис. 4 -->

CSS


.image-width{
    width: 100%; /* Рис. 4 */
}

Рамка вокруг картинки CSS

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

Пример

HTML


<img src="image.jpg" alt="" class="image-border"/>

CSS


.image-border {
    border: 10px solid #56382d; /* Ширина,  стиль и цвет рамки */
}

Скругление углов картинки CSS

Чтобы задать скругление углов изображению с помощью CSS можно использовать свойство border-radius, можно поставить любое значение, если на сайте такая задумка. Вы так же можете добавить к картинке рамку и тень, это придаст объем и картинка будет смотреться еще интереснее. Можно воспользоваться генератором скругления углов CSS и скопировать уже готовый код.

Пример

HTML


<img src="image.jpg" alt="" class="image-radius"/>

CSS


.image-radius {
    border-radius: 10px;  /* Скругление углов изображения */
    border: 5px solid #fff; /* Цвет и ширину рамки */
    box-shadow: 2px 1px 5px #999999; /* Цвет и размер тени */
}

Как отразить картинку по вертикали и горизонтали CSS

Чтобы отразить картинку по вертикали или горизонтали с помощью CSS можно использовать свойство transform с функцией scale(), отрицательное значение этой функции (-1) позволяет сделать отражение. Написать код CSS можно так:

  • transform: scale(-1, 1) — отражение по горизонтали;
  • transform: scale(1, -1) — отражение по вертикали;
  • transform: scale(-1, -1) (или просто scale(-1)) — одновременное отражение по горизонтали и вертикали.

Вместо scale() можно использовать отдельные функции scaleX() и scaleY(), они отвечают за масштабирование по соответствующим координатам:

  • transform: scaleX(-1) — отражение по горизонтали;
  • transform: scaleY(-1) — отражение по вертикали;
  • transform: scaleX(-1) scaleY(-1) — одновременное отражение по горизонтали и вертикали.

На данном примере показано как отразить картинку по горизонтали используя transform: scaleX.

Пример

HTML


<img src="image.jpg" alt=""/>
<img src="image.jpg" alt="" class="scaleX"/>

CSS


.scaleX {
    transform: scaleX(-1); /* Отражение картинки по горизонтали */
}

На данном примере показано как отразить картинку по вертикали используя transform: scaleY.

Пример

HTML


<img src="image.jpg" alt=""/>
<img src="image.jpg" alt="" class="scaleY"/>

CSS


.scaleX {
    transform: scaleY(-1); /* Отражение картинки по вертикали */
}

Поворот изображения CSS

Чтобы повернуть картинку необходимо применить свойство transform с функцией rotate(), внутри которой нужно указать угол поворота. Для примера ниже показаны различные варианты поворота изображения.

Картинке можно задать разный угол поворота с помощью генератора поворота элемента CSS, и скопировать уже готовый код.

Исходное изображение
transform: rotate(90deg);
transform: rotate(180deg);
transform: rotate(-90deg);

На примере показан поворот картинки на 45 градусов.

Пример

HTML


<img src="image.jpg" alt=""/>
<img src="image.jpg" alt="" class="rotate-right"/>

CSS


.rotate-right {
    transform: rotate(45deg);
}

Картинка ссылка CSS/HTML

Как сделать картинку ссылкой? На самом деле все очень просто. В тег <a> вставляем саму картинку <img>, атрибут src у картинки — это путь к картинке, атрибут href у ссылки — адрес сайта или веб-страницы, куда будет вести ссылка. Посмотреть наглядно можно на примере:


<a href="https://stylecss.ru/"><img src="img/cat.png" alt=""></a>
Картинка ссылка CSS/HTML

Картинки ссылки выглядят как обычные, вы можете использовать изображения иконок или любых других графических изображений для того, чтобы пользователю было понятно, что он переходит по ссылке, когда наводит на картинку мышку или щелкает по ней.

By julia