CSS圖像大小調整

我有這樣的CSS代碼：CSS圖像大小調整

<style> 
    body { 
    position:absolute; 
    background-image: url(art/c11.jpg); 
    width:100%; 
    height:100%; 
    } 
</style>

正如我在網上讀，我預期這將調整的背景圖像，並要將其安裝到瀏覽器窗口。

但是沒有。我認爲我顯然做錯了什麼（我不知道足夠的CSS）。有小費嗎？

UPDATE：

我加洞例如（不工作）：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>No Title</title> 
<style type="text/css"> 
    body { 
    position:absolute; 
    background-image:url(art/c11.jpg); 
    background-size:100%; 
    background-repeat: no-repeat; 
    width:100%; 
    height:100%; 
    } 
</style> 
</head> 
<body > 
</body> 
</html>

來源

2010-07-20 mRt

你正在定位你的身體元素的任何原因？這不應該是必須的，但通常是將body的邊距和填充設置爲0的好主意。這可以使一些瀏覽器使古怪的默認值正常化。 – jasongetsdown 2010-07-20 03:21:50

如果你要使這項工作跨瀏覽器，你最好把圖像放在頁面上，然後將所有的內容位於頂部的DIV。例如。

CSS

#background { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

#content { 
    position: relative; 
    z-index: 1; 
}

如果您打算支持IE6，然後加入這個片斷：

<!--[if IE 6]> 
    <style type="text/css"> 
    html { 
     overflow-y: hidden; 
    } 

    body { 
     overflow-y: auto; 
    } 

    #background { 
     position:absolute; 
     z-index:-1; 
    } 

    #content { 
     position:static; 
    } 
    </style> 
<![endif]-->

HTML

<img id="background" src="art/c11.jpg" alt="" /> 

<div id="content"> 
    Your content 
</div>

Code in action.

來源

2010-07-20 03:15:17

您可以使用background-size:100%的CSS3屬性，但此屬性的支持不是一刀切又贏得了」不適用於舊版瀏覽器。爲了實現你想要的東西，你需要一堆黑客才能實現它。有許多像這樣的博客one會告訴你你需要做什麼。我不建議這樣做，因爲如果你有一個大的圖像/慢連接，你會看到圖像加載。如果圖像的質量不是最好的，那麼在整個屏幕或不同的分辨率下都不會看起來很好。

來源

2010-07-20 02:53:22 amurra

我不知道爲什麼，但這兩個例子都不適用於我...無論如何。 – mRt 2010-07-20 03:05:26

添加background-repeat屬性。

完成的代碼應該是這樣的：

 
    body { 
    position:absolute; 
    background-image: url(art/c11.jpg); 
    background-size:100%; 
    background-repeat: no-repeat; 
    width:100%; 
    height:100%; 
    }

來源

2010-07-20 02:53:24

我不知道爲什麼，但這兩個例子都不適用於我...謝謝。 – mRt 2010-07-20 03:04:19

剛剛用amurra的建議更新了代碼。它現在工作嗎？ – 2010-07-20 03:06:48

沒有。事實上，使用該代碼，它不會顯示任何內容。 – mRt 2010-07-20 03:10:34

我不認爲有一種方法可以拉伸或控制使用CSS背景圖像的大小。然而，可以使用的背景位置，背景附件和背景重複調性質來實現的替代結果..

，或者您可以使用一些JavaScript把圖像劃分成較低的z折射率層並設置圖層作爲你backgournd，但這是一點點在那裏黑客

來源

2010-07-20 02:56:32

通過使用CSS3就可以實現圖像的角度調整，

html { 
background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

這適用於所有的瀏覽器和IE9 +。以下過濾器也適用於ie7和ie8。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

來源

2012-12-27 04:53:58 Gopalch

CSS圖像大小調整

回答

相關問題