Растянуть и масштабировать фон CSS
Есть ли способ заставить фон CSS растягивать или масштабировать, чтобы заполнить его контейнер?
16 ответов
Для современных браузеров вы можете сделать это, используя background-size:
body {
background-image: url(bg.jpg);
background-size: cover;
}
cover означает растяжение изображения по вертикали или по горизонтали, чтобы оно никогда не повторялось.
Это будет работать для Safari 3 (или более поздней версии), Chrome, Opera 10+, Firefox 3.6+ и Internet Explorer 9 (или более поздней версии).
Чтобы он работал с более низкими версиями Internet Explorer, попробуйте эти CSS:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Используйте свойство CSS 3 background-size:
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
Это доступно для современных браузеров, начиная с 2012 года.
Масштабирование изображения с помощью CSS не совсем возможно, но подобный эффект может быть достигнут следующим образом.
Используйте эту разметку:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
со следующим CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
и ты должен быть готов!
Для того, чтобы масштабировать изображение до полного обтекания и сохранить соотношение сторон, вы можете сделать это вместо этого:
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
Это работает довольно хорошо! Однако если обрезается одно измерение, оно будет обрезано только на одной стороне изображения, а не будет равномерно обрезано с обеих сторон (и отцентрировано). Я протестировал его в Firefox, Webkit и Internet Explorer 8.
Используйте атрибут background-size в CSS3:
.class {
background-image: url(bg.gif);
background-size: 100%;
}
РЕДАКТИРОВАТЬ: Modernizr поддерживает обнаружение поддержки размера фона. Вы можете использовать обходное решение JavaScript, написанное для работы, однако вам это нужно и загружать его динамически, когда нет поддержки. Это обеспечит поддержку кода, не прибегая к навязчивым хакерским работникам CSS для определенных браузеров.
Лично я использую скрипт для работы с ним, используя jQuery, это адаптация imgsizer. Поскольку в большинстве конструкций, которые я сейчас использую, ширина% используется для разметки флюидов на устройствах, есть небольшая адаптация к одному из циклов (с учетом размеров, которые не всегда равны 100%):
for (var i = 0; i < images.length; i++) {
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf('%') == -1) {
continue;
}
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
}
РЕДАКТИРОВАТЬ: Вы также можете быть заинтересованы в jQuery CSS3 Finaliz [s] e.
Попробуйте статью background-size. Если вы используете все перечисленное ниже, оно будет работать в большинстве браузеров, кроме Internet Explorer.
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
.style1 {
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;
}
Работает в:
- Safari 3+
- Хром Что бы ни +
- IE 9+
- Opera 10+ (Opera 9.5 поддерживает фоновый размер, но не ключевые слова)
- Firefox 3.6+ (Firefox 4 поддерживает версию с префиксом не от поставщика)
Кроме того, вы можете попробовать это для решения т.е.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;
Кредит на эту статью Криса Койера http://css-tricks.com/perfect-full-page-background-image/
Не сейчас. Он будет доступен в CSS 3, но потребуется время, пока он не будет реализован в большинстве браузеров.
Одним словом: нет. Единственный способ растянуть изображение с помощью <img> тег. Вы должны быть творческими.
Раньше это было правдой в 2008 году, когда был написан ответ. Сегодня современные браузеры поддерживают background-size которая решает эту проблему. Помните, что IE8 не поддерживает это.
Определить "растянуть и масштабировать"...
Если у вас есть растровый формат, обычно не очень хорошо (графически) растягивать его и вытягивать. Вы можете использовать повторяющиеся узоры, чтобы создать иллюзию того же эффекта. Например, если у вас есть градиент, который становится светлее в нижней части страницы, тогда вы будете использовать графику шириной в один пиксель и той же высоты, что и ваш контейнер (или, предпочтительно, больше, чтобы учесть масштабирование), а затем разместите его по всей ширине. стр. Точно так же, если градиент пробегает по странице, он будет на один пиксель в высоту и шире вашего контейнера и будет повторяться вниз по странице.
Обычно, чтобы создать иллюзию растяжения, чтобы заполнить контейнер, когда контейнер растет или сжимается, вы делаете изображение больше, чем контейнер. Любое перекрытие не будет отображаться за пределами контейнера.
Если вам нужен эффект, основанный на чем-то похожем на коробку с изогнутыми краями, то вы бы прикрепили левую сторону вашего бокса к левой стороне вашего контейнера с достаточным перекрытием, чтобы (в пределах разумного) независимо от того, насколько большой контейнер, он никогда не будет заканчивается из фона, а затем вы накладываете изображение правой стороны коробки с изогнутыми краями и размещаете его справа от контейнера. Таким образом, по мере того, как контейнер сжимается или растет, эффект изогнутой коробки, по-видимому, уменьшается или увеличивается вместе с ним - на самом деле это не так, но он создает иллюзию того, что происходит.
Что касается действительно уменьшения и увеличения изображения в контейнере, вам необходимо использовать некоторые приемы наложения слоев, чтобы изображение работало в качестве фона, и некоторый JavaScript, чтобы изменить его размер в контейнере. Там нет текущего способа сделать это с помощью CSS...
Боюсь, если вы используете векторную графику, вы выходите за рамки моей компетенции.
Это то, что я сделал из этого. В классе растяжки я просто изменил высоту на auto, Таким образом, фоновое изображение всегда будет иметь одинаковый размер с шириной экрана, а высота всегда будет иметь правильный размер.
#background {
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
Добавить background-attachment линия:
#background {
background-attachment:fixed;
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
Попробуй это
body
{
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Я хотел бы отметить, что это эквивалентно выполнению:
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}
Другим отличным решением для этого является Backstretch Srobbin, который можно применить к телу или любому элементу на странице - http://srobbin.com/jquery-plugins/backstretch/
Дополнительный совет для мошенничества SolidSmile - масштабировать (пропорциональное изменение размера), устанавливая ширину и используя auto для высоты.
Пример:
#background {
width: 500px;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
Использовать border-image : yourimage свойство, чтобы установить ваше изображение и масштабировать его до всей границы вашего экрана или окна.