在後臺拉伸和縮放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，這彷佛更容易。