Могу ли я использовать несколько фоновых изображений с помощью CSS?
Можно ли иметь два фоновых изображения? Например, я хотел бы, чтобы одно изображение повторялось вверху (repeat-x), а другое повторялось на всей странице (повторение), где одно изображение на всей странице находится за тем, которое повторяется вверху.
Я обнаружил, что могу добиться желаемого эффекта для двух фоновых изображений, установив фон html и body:
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
Это «хороший» CSS? Есть способ лучше? А что, если мне нужно три или более фоновых изображения?
Ответы 8
У вас может быть div для верхней части с одним фоном и другой для главной страницы, и разделять содержимое страницы между ними или помещать содержимое в плавающий div на другом z-уровне. То, как вы это делаете, может сработать, но я сомневаюсь, что это будет работать во всех браузерах, с которыми вы сталкиваетесь.
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;
}
И если вы хотите иметь разные настройки повтора / положения, вы можете сделать это: css3.info/preview/multiple-backgrounds
Для IE8 - IE6 вы можете использовать PIE.js. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…
Соответствует ли размер фона этому же правилу? Я хочу, чтобы все мои фоновые изображения были в полную высоту, за исключением одного из них (которым я хочу быть высотой изображения).
Да, размер фона следует тому же правилу (как и все другие свойства фона). Свойства фона (обычно начинающиеся с префикса background-, а затем конкретное свойство фона) могут быть фактически указаны в самом свойстве фона, поэтому, поскольку поддерживается несколько фоновых изображений, также поддерживаются несколько перечисленных свойств. Это касается размера, положения, повтора и т. д.
Да, это возможно, и это реализовано на популярном сайте тестирования юзабилити Silverback. Если вы посмотрите исходный код, то увидите, что фон состоит из нескольких изображений, помещенных друг на друга.
Вот статью, демонстрирующую, как сделать эффект, можно найти на Витамин. Похожую концепцию обертывания этих слоев «луковой кожуры» можно найти на Список отдельно.
Текущая версия FF и IE, а также некоторые другие браузеры поддерживают несколько фоновых изображений в одном объявлении CSS2. Посмотри здесь http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ и здесь http://www.quirksmode.org/css/multiple_backgrounds.html и здесь http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Для IE вы можете подумать о добавлении поведения. Смотрите здесь: http://css3pie.com/
Если вам нужно несколько фоновых изображений, но не хотите, чтобы они перекрывались, вы можете использовать этот 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>
Самый простой способ, который я нашел, использовать два разных фоновых изображения в одном 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: для каждого изображения индивидуально
#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
Несколько фонов поддерживаются последними версиями Firefox, Chrome, Safari и Opera. Он также будет поддерживаться в IE9. en.wikipedia.org/wiki/…