Могу ли я создать несколько фоновых изображений с помощью CSS?
-
05-07-2019 - |
Вопрос
Возможно ли иметь два фоновых изображения?Например, я хотел бы, чтобы одно изображение повторялось сверху (repeat-x), а другое повторялось по всей странице (repeat), где изображение по всей странице находится за тем, которое повторяется сверху.
Я обнаружил, что могу добиться желаемого эффекта для двух фоновых изображений, установив фон html и body:
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
Является ли это "хорошим" CSS?Есть ли лучший метод?А что, если бы мне понадобились три или более фоновых изображения?
Решение
CSS3 допускает подобные вещи, и это выглядит так:
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
Текущие версии всех основных браузеров теперь поддерживают его , однако, если вам нужно поддерживает IE8 или ниже, тогда лучший способ обойти это - иметь дополнительные div:
<body>
<div id="bgTopDiv">
content here
</div>
</body>
body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}
Другие советы
Я нашел самый простой способ использовать два разных фоновых изображения в одном элементе div с помощью этой строки кода:
body {
background:url(image1.png) repeat-x, url(image2.png) repeat;
}
Очевидно, что это не должно быть только для тела сайта, вы можете использовать это для любого div, который вы хотите. Р>
Надеюсь, это поможет! В моем блоге есть пост, в котором об этом немного подробнее говорится, если кому-то нужны дальнейшие инструкции или помощь - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div .
используйте это
body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}
простой способ настроить каждую позицию изображения с background-position: и установить свойство повтора с background-repeat: для каждого изображения индивидуально
Текущая версия FF и IE и некоторых других браузеров поддерживают несколько фоновых изображений в одной декларации CSS2. Посмотрите здесь http://dense13.com/blog/ 2008/08/31 / multiple-background-images-with-css2 / и здесь http : //www.quirksmode.org/css/multiple_backgrounds.html и здесь http://css3pie.com/
Да, это возможно, и было реализовано на популярном веб-сайте тестирования юзабилити Silverback . Если вы посмотрите исходный код, то увидите, что фон состоит из нескольких изображений, расположенных друг над другом.
Вот статья, демонстрирующая, как сделать эффект, можно найти на Витамин . Сходную концепцию обертывания этих слоев «луковой кожуры» можно найти в List Apart . р>
Если вы хотите использовать несколько фоновых изображений, но не хотите, чтобы они перекрывались, вы можете использовать этот CSS:
body {
font-size: 13px;
font-family:Century Gothic, Helvetica, sans-serif;
color: #333;
text-align: center;
margin:0px;
padding: 25px;
}
#topshadow {
height: 62px
width:1030px;
margin: -62px
background-image: url(images/top-shadow.png);
}
#pageborders {
width:1030px;
min-height:100%;
margin:auto;
background:url(images/mid-shadow.png);
}
#bottomshadow {
margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}
#page {
text-align: left;
margin:62px, 0px, 20px;
background-color: white;
margin:auto;
padding:0px;
width:1000px;
}
с этой структурой HTML:
<body
<?php body_class(); ?>>
<div id="topshadow">
</div>
<div id="pageborders">
<div id="page">
</div>
</div>
</body>
#example1 {
background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
padding: 15px;
background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Мы можем легко добавить несколько изображений, используя CSS3.мы можем подробно прочитать здесь http://www.w3schools.com/css/css3_backgrounds.asp
Вы можете создать div для верхней части с одним фоном и другим для главной страницы, а также разделить содержимое страницы между ними или поместить содержимое в плавающий div на другом z-уровне. То, как вы это делаете, может работать, но я сомневаюсь, что это будет работать во всех браузерах, с которыми вы сталкиваетесь.