css如何解決背景圖片解析度問題

『壹』 css 如何讓圖片全屏的問題

1:一個很小的條狀圖，通過repeat後，形成一個很規則的大圖背景。 但是css3出現以後，這個情況被改善了。background-size 屬性可以讓我們之前的希望成真。而且這個屬性在firefox，chrome，以及ie9上都可以使用。

2:背景圖尺寸（數值表示方式）代碼如下:#background-size{ background-size:200px 100px; }

3:背景圖尺寸（百分比表示方式） 代碼如下:#background-size2{ background-size:30% 60%; }

4:背景圖尺寸（等比擴展圖片來填滿元素，即cover值）代碼如下:#background-size3{ background-size:cover; }

5:背景圖尺寸（等比縮小圖片來適應元素的尺寸，即contain值） 代碼如下:#background-size4{ background-size:contain; }

6:背景圖尺寸（以圖片自身大小來填充元素，即auto值）代碼如下:#background-size5{ background-size:auto; }

(1)css如何解決背景圖片解析度問題擴展閱讀:

1:CSS 指層疊樣式表 (Cascading Style Sheets)樣式定義如何顯示 HTML 元素。

2:樣式通常存儲在樣式表中，把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題。

3:外部樣式表可以極大提高工作效率，外部樣式表通常存儲在 CSS 文件中。

4:css設置背景圖片全屏，如果只是將其當做一張圖片顯示，可以通過css控制。超大圖片，引入進來即可根據大小縮放。

5:如果這張圖片為背景圖片由於背景圖片不具有伸縮性，只能通過別的方法繞著解決，在ie中可以用，實現背景拉伸鋪滿整個瀏覽器，但其它的瀏覽器不支持。

『貳』 css 如何固定網頁背景，並且隨瀏覽器的像素大小而變！

css3可以做到兼容ie9和市面上的多數非IE內核瀏覽器，它的

background-size可以設置2個值，1個為必填，1個為可選。

其中第1個值用於指定背景圖的width，第2個值用於指定背景圖的height，如果只給background-size設置1個值，則第2個值默認為auto（cover和contain特定值除外）。

div{

background-image:url(test.png);

background-repeat:no-repeat;

background-size:100px;

}

cover表示覆蓋整個容器。你要背景全部那麼需要注意的是html,body {height:100%}

當然以上內容不兼容低版本IE瀏覽器和不兼容css3規則的瀏覽器。

你說的背景整張顯示，我之前項目遇到過這樣的需求。我是直接用腳本寫的。

實現思路是用圖片絕對定位在網站最底層，z-index屬性設置成負值。用腳本判斷窗口大小，在每次窗口大小發生改變時監聽事件捕獲長寬，賦值給這張「地圖」。

『叄』 css中如何調整插入背景圖片的大小

可以通過cover和contain來對圖片進行伸縮。

語法：

background-size:auto;/* 默認值，不改變背景圖片的高度和寬度 */

background-size:100px 50px;/* 第一個值為寬，第二個值為高，當設置一個值時，將其作為圖片寬度來等比縮放 */

background-size:10%;/* 0％~100％之間的任何值，將背景圖片寬高按百分比顯示，當設置一個值的時候同也將其作為圖片寬度來等比縮放 */

background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */

background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */

(3)css如何解決背景圖片解析度問題擴展閱讀：

CSS背景圖片自適應、全屏、填充、拉伸

方法一：js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

</script>

方法二：全瀏覽器兼容

.bg{

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

『肆』 如何設置CSS網頁中的背景圖片不讓其重復並且鋪滿整個屏幕，不會因為解析度的問題而顯示不出來

background-repeat: no-repeat; /* 不平鋪 */

然後是鋪滿容器的問題，如果忽略IE內核的瀏覽器，用css3屬性background-size: 100%;輕松解決，要兼容的話可以設一個背景層放在容器的下方，背景層裡面放你的背景圖片，寬高設為跟容器一樣，然後把容器的背景設為透明即可。