在后台拉伸和缩放CSS图像 - 仅限CSS

时间 2019-12-20

标签后台拉伸缩放 css 图像仅限栏目 CSS 繁體版

原文原文链接

我但愿个人背景图像拉伸和缩放取决于浏览器视口大小。 css

我已经在Stack Overflow上看到了一些关于完成这项工做的问题，例如Stretch和缩放CSS背景 。它运行良好，但我想使用background放置图像，而不是使用img标记。 html

在那个中放置一个img标签，而后用CSS咱们向img标签致敬。 web

width:100%; height:100%;

它有效，但这个问题有点陈旧，并指出在CSS 3中调整背景图像的大小将会很好。我试过第一个这个例子，但它对我来讲没有用。浏览器

使用background-image声明有一个很好的方法吗？ app

#1楼

我使用它，它适用于全部浏览器： ide

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

#2楼

你想用一张图片来实现吗？由于你实际上可使用两个图像使拉伸背景有些相似。例如PNG图像。测试

我之前作过这个，并无那么难。此外，我认为伸展只会损害背景质量。若是你添加一个巨大的图像，它会减慢慢速计算机和浏览器的速度。 this

#3楼

实际上，您可使用img标签得到与背景图像相同的效果。您只需将其z-index设置为低于其余全部值，设置position：absolute并为前景中的每一个框使用透明背景。 url

#4楼

如下CSS部分应该使用全部浏览器拉伸图像。 spa

我为每一个页面动态执行此操做。所以，我使用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测试的。

#5楼

使用我提到的代码 ......

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，这彷佛更容易。