Я хочу, чтобы мое фоновое изображение растягивалось и масштабировалось в зависимости от размера области просмотра браузера.
Я'видел несколько вопросов на Stack Overflow, которые делают эту работу, например, Stretch and scale CSS background. Это работает хорошо, но я хочу разместить изображение с помощью background
, а не с помощью тега img
.
В этом случае размещается тег img
, а затем с помощью CSS мы привязываемся к тегу img
.
width:100%; height:100%;
Это работает, но этот вопрос немного устарел, и в нем говорится, что в CSS 3 изменение размера фонового изображения будет работать довольно хорошо. Я'пробовал это пример первый, но у меня ничего не вышло.
Есть ли хороший способ сделать это с помощью объявления background-image
?
CSS3 имеет приятный маленький атрибут, называемый фон-размер:крышка`.
Это масштабирует изображение так, чтобы фон полностью покрыт фоновое изображение, сохраняя пропорции. Вся площадь будет покрыта. Однако, часть изображения может не отображаться, если ширина/высота размер изображения слишком велик.
Вы могли бы использовать свойство CSS3, чтобы сделать это достаточно красиво. Он изменяет соотношение таким образом без искажения изображения (хотя это высококлассные небольших изображений). Просто обратите внимание, это's не реализована во всех браузерах.
background-size: 100%;
Используя код, который я упоминал...
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
Это дает желаемый эффект: прокручивается только содержимое, а не фон.
Размер фонового изображения изменяется в соответствии с областью просмотра браузера при любом размере экрана. Когда содержимое не помещается в область просмотра браузера и пользователю необходимо прокрутить страницу, фоновое изображение остается неподвижным в области просмотра, а содержимое прокручивается.
Кажется, что с CSS 3 это будет намного проще.
Усс:
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
background-size: 100% 100%;
растягивает фон, чтобы заполнить весь элемент на обеих осях.
В CSS часть должна растянуть изображение во всех браузерах.
Я делаю это динамически для каждой страницы. Поэтому я использую PHP, чтобы создать свой собственный HTML-тегов для каждой страницы. Все фотографии в 'образ' папка, а в конце 'БГ.форматы jpg'.
<html style="
background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\');
-ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>
Если у вас есть только одна фоновая картинка для всех страниц, то вы можете удалить $рис
переменная, удалить побега бэк-слеши, скорректировать пути и поместите этот код в ваш CSS-файл.
html{
background: url(images/homeBg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}
Это было проверено с интернет&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;9, 21 хром, и Firefox 14.
С помощью тега img можно добиться того же эффекта, что и с фоновым изображением. Вам просто нужно установить его z-index ниже, чем все остальное, задать position:absolute и использовать прозрачный фон для каждого поля на переднем плане.
Это объясняется хитрости CSS: совершенные полную страницу фонового изображения
Демо: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Код:
body {
background: url(images/myBackground.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Вы можете добавить этот класс в CSS-файл.
.stretch {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Он работает:
Для того, чтобы масштабировать изображения в соответствии с размером контейнера, используйте следующие:
background-size: contain;
background-repeat: no-repeat;
Я использую это, и это работает со всеми браузерами:
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
<p>Go on, try it - resize your browser!</p>
</div>
</body>
</html>
Я согласен с изображения в абсолютной div со 100% шириной и высотой. Убедитесь, что вы задать 100% ширину и высоту для тела в CSS и задать поля и отступы в ноль. Другой вопрос вы найдете с помощью этого метода заключается в том, что при выборе текста, выделенной области иногда может включать фоновое изображение, которое имеет побочный эффект, что делает всю страницу выбранное состояние. Вы можете обойти это, используя пользователя-выберите:Нет правил CSS, вот так:
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
width: 100%
margin: none;
padding: none;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -99999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#background img {
width: 100%;
height: 100%;
}
#main{ z-index:10;}
</style>
</head>
<body>
<div id="main">
content here
</div>
<div id="background"><img src="bg.jpg"></div>
</body>
</html>
Опять же, интернет&ампер;усилитель; nbsp;Explorer является плохим парнем, потому что он не'т признают пользователей-выберите вариант - даже не интернет&усилителя;усилитель; nbsp;Обозреватель&усилителя;усилитель; nbsp;10 просмотр поддерживает его, поэтому у вас есть возможность либо использовать JavaScript для предотвращения фонового изображения выбор (например, http://www.felgall.com/jstip35.htm ) или с помощью УСБ 3 фон-стрейч метода.
Также, для СЕО я бы поставил фоновую картинку внизу страницы, но если фоновое изображение загружается слишком долго (то есть с белым фоном изначально), можно перейти к верхней части страницы.
Спасибо!
Но тогда это не работает для Google хром]1 и сафари браузеры (растяжка работал, но высота фотографии была только 2&ампер;усилитель; nbsp;мм!), пока кто-то не сказал мне, чего не хватает:
попробуйте установить
высота:авто;мин-высота:100%;
Так что ваш высота:100%;
линии, дает:
#### #background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:auto;
min-height:100%;
}
Просто до этого добавленный код у меня есть это в моем для Drupal сборщики стиль темы.Усс`:
> в формате HTML, тело{высота:100%;}
#страницы{фона: ffffff#; высота:авто !важно;высота:100%;мин-высота:100%;положение:относительная;}
Тогда мне придется сделать новый блок в Друпале с картинкой при добавлении класс=стрейч
:
и GT; #### < ИМГ АЛТ=" и" Класс="от растяжек" и в src="с рис.URL-адрес, что" />
Просто копировать картинки с редактором в том, что Друпал блок не't работа, нужно менять редактор не форматированный текст.
Я хотел центр и масштаб фонового изображения, не растягивая его на всю страницу, и я хотел, чтобы пропорции сохранить. Это работало для меня, спасибо за варианты, предложенные в других ответов:
ВСТРОЕННОЕ ИЗОБРАЖЕНИЕ: ------------------------
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
УСБ ----------------------------------
html {
height:100%;
}
#background {
text-align: center;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
margin: auto;
height:100%;
}
Я использовал сочетание фона-х свойств CSS, чтобы достичь идеального масштабирования фонового изображения.
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
Это делает почву всегда покрывают все окно браузера и остается в центре, когда масштабирование.
Используйте Бэкстретч плагин. Можно даже нескольких картинок слайд. Он также работает внутри контейнеров. Таким образом, например, можно было только часть фона была покрыта фоновое изображение.
Поскольку даже я мог заставить его работать, доказывает это, чтобы быть простым в использовании плагин :).
Если вы хотите иметь контент, центрироваться, используйте следующую комбинацию:
background-repeat: no-repeat;
background-size: cover;
background-position: center;
Это будет выглядеть красиво.
Используйте этот CSS:
фон-размер: 100% 100%`
Вы можете использовать границы изображения : вашего образ
имущество для масштабирования изображения до границы. Даже если вы дадите фоне-изображения, границы изображения будут нарисованы над ним.
Свойство границы-изображения-это очень полезно, если ваш лист стиль реализуется где-то, что не'т поддерживать УСБ Вы 3. Если вы используете браузер Google Chrome или Firefox, то я рекомендую фон-размер:обложка самого имущества
.