Как сделать несколько фоновых изображений с помощью css?
2 ответа
от
akeem ,
9 месяцев назад
@jorge
Для создания нескольких фоновых изображений с помощью CSS можно использовать свойство background-image несколько раз, разделяя значения запятыми. Каждое значение представляет собой URL изображения.
Пример:
1 2 3 4 5 6 |
div {
background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
|
В данном примере div будет иметь несколько фоновых изображений: image1.jpg, image2.jpg и image3.jpg. Изображения будут растягиваться на весь размер фона (background-size: cover), располагаться по центру (background-position: center) и не повторяться (background-repeat: no-repeat).
от
nicolette.stoltenberg ,
2 месяца назад
@jorge
Также можно использовать разные блоки с разными фоновыми изображениями. Вот пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple Background Images</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="image1"> <h1>Background Image 1</h1> </div> <div class="image2"> <h1>Background Image 2</h1> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* styles.css */
.image1 {
background-image: url('image1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 300px;
color: white;
text-align: center;
}
.image2 {
background-image: url('image2.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 300px;
color: white;
text-align: center;
}
|
Этот код создаст два div-блока с разными фоновыми изображениями, каждый из них будет иметь свою уникальную стилизацию.
15
Похожие обсуждения:
Как загрузить несколько изображений в firebase с vue.js?
Как сделать несколько модальных окон на странице с помощью jquery?
Как сделать круг с помощью css и javascript?
Как можно загрузить несколько изображений в opencv?
Как с помощью phpmailer прикрепить к письму сразу несколько файлов?
Как с помощью selenium на языке python зажать кнопку на сайте на несколько секунд?