Растягивайте и масштабируйте изображение CSS в фоновом режиме - только с помощью CSS - PullRequest
Новая
       148

Растягивайте и масштабируйте изображение CSS в фоновом режиме - только с помощью CSS

805 голосов
/ 19 июля 2009

Я хочу, чтобы мое фоновое изображение растягивалось и масштабировалось в зависимости от размера области просмотра браузера.

Я видел несколько вопросов о переполнении стека, которые выполняют эту работу, например Растягивание и масштабирование фона CSS , например. Это хорошо работает, но я хочу разместить изображение, используя background, а не тег img.

В этот тег помещается тег img, а затем с помощью CSS мы отдаем дань тегу img. 

width:100%; height:100%;

Это работает, но этот вопрос немного устарел и утверждает, что в CSS 3 изменение размера фонового изображения будет работать довольно хорошо. Я попробовал этот пример первый , но у меня не получилось.

Есть ли хороший способ сделать это с помощью объявления background-image?

Ответы [ 21 ]

990 голосов
/ 10 сентября 2011

CSS3 имеет приятный маленький атрибут с именем background-size:cover.

Это масштабирует изображение так, чтобы фоновая область полностью покрывалась фоновым изображением при сохранении соотношения сторон. Вся область будет покрыта, однако часть изображения может быть не видна, если ширина / высота измененного изображения слишком велика

459 голосов
/ 28 февраля 2011

Вы можете использовать свойство CSS3, чтобы сделать это довольно хорошо. Это изменяет размер, чтобы не искажать изображение (хотя это действительно масштабирует маленькие изображения). Просто отметьте, что это еще не реализовано во всех браузерах. 

background-size: 100%;
183 голосов
/ 30 июля 2009

Используя код Я упоминал ...

HTML 

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS 

#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 кажется, что это было бы намного проще.

162 голосов
/ 23 марта 2012

CSS: 

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*/
}
47 голосов
/ 26 января 2016 
background-size: 100% 100%;

растягивает bg, чтобы заполнить весь элемент на обеих осях

39 голосов
/ 06 августа 2012

Следующая часть CSS должна растягивать изображение во всех браузерах.

Я делаю это динамически для каждой страницы. Поэтому я использую PHP для генерации собственного HTML-тега для каждой страницы. Все изображения находятся в папке «image» и заканчиваются на «Bg.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\')\
";>

Если у вас есть только одно фоновое изображение для всех страниц, вы можете удалить переменную $pic, удалить экранирующие косые черты, настроить пути и поместить этот код в свой файл 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');
}

Это было протестировано с Internet Explorer 9, Chrome 21 и Firefox 14.

17 голосов
/ 19 июля 2009

Вы можете фактически добиться того же эффекта, что и фоновое изображение с тегом img. Вам просто нужно установить его z-index ниже, чем все остальное, установить position: absolute и использовать прозрачный фон для каждого поля на переднем плане.

17 голосов
/ 09 мая 2011

Используйте этот CSS: 

background: url('img.png') no-repeat; 
background-size: 100%;
14 голосов
/ 17 апреля 2015

Вы можете добавить этот класс в свой файл 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;
}

Работает в:

  • Safari 3 или более поздняя версия
  • Хром Все или позже
  • Internet Explorer 9 или более поздней версии
  • Opera 10 или более поздняя версия (поддерживается Opera 9.5 background-size, но не ключевые слова)
  • Firefox 3.6 или более поздняя версия (Firefox 4 поддерживает версию с префиксом не от поставщика)
14 голосов
/ 28 июля 2017

Объясняется css-трюками https://css -tricks.com / совершенное полностраничное-фоновое изображение /

demo: https://css -tricks.com / examples / FullPageBackgroundImage / прогресс.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;
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...