css - name - which of the following are valid selectors




Растяните и масштабируйте изображение CSS в фоновом режиме-только с CSS (12)

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

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

В том, что размещен тег img , а затем с CSS мы отдаем дань тегу img .

width:100%; height:100%;

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

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


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

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


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*/
}

Вы можете использовать свойство border-image : yourimage для масштабирования изображения до границы. Даже если вы даете фоновое изображение, изображение границы будет нарисовано поверх него.

свойство border-image очень полезно, если ваша таблица стилей реализована где-то, что не поддерживает CSS3. Если вы используете хром firefox, тогда я рекомендую использовать свойство background-size:cover .


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

background-size: 100%;

Для правильного масштабирования изображений на основе размера контейнера необходимо следующее:

{
background-size:contain;
background-repeat: no-repeat;
}

Используйте плагин Backstretch . Можно было даже сместить несколько изображений. Он также работает в контейнерах. Таким образом, например, можно было бы покрыть только часть фона фоном.

Так как даже я мог заставить его работать, это будет простой в использовании плагин :).


Используя код, который я упомянул ...

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



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


Я использую это, и он работает со всеми браузерами:

<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>

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

INLINE IMAGE: ------------------------

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

CSS ----------------------------------

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 должна растянуть изображение со всеми браузерами.

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





background