兩種方法用CSS實現背景圖尺寸不隨瀏覽器縮放而變化的代碼

這篇文章主要介紹了關於兩種方法用CSS實現背景圖尺寸不隨瀏覽器縮放而變化的代碼，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

一些網站的首頁背景圖尺寸不隨瀏覽器縮放而變化，本例使用CSS 實現背景圖尺寸不隨瀏覽器縮放而變化，方法一. 把圖片作為background，方法二使用img標籤。喜歡的朋友可以看看

一些網站的首頁背景圖尺寸不隨瀏覽器縮放而變化，例如百度個人版的首頁，縮放後背景圖的尺寸並不改變：

再比如花瓣網( huaban.com )：

現在用CSS來實現這一效果。
首先需要一張足夠大尺寸的圖片，百度背景圖的尺寸為1600*1000px( 圖片地址：http://4.su.bdimg.com/skin/12.jpg?2 )；花瓣背景圖的尺寸為1600*1600px( 圖片地址：http://hbfile.b0.upaiyun.com/img/unauth_page/food_bg.jpg )；
然後有兩種方法可以達到背景圖不縮放的效果：
方法一. 把圖片作為background
有幾個CSS的屬性要提一下：background-size：cover，這個CSS3的屬性作用是把背景映像擴充至足夠大，以使背景映像完全覆蓋背景地區，背景映像的某些部分也許無法顯示在背景定位地區中，如果不使用這個屬性，在IE11和FireFox中縮放瀏覽器，背景圖片會隨之縮小，同時使用-webkit-background-size: cover和-o-background-size: cover相容webkit核心瀏覽器和Opera瀏覽器；background-attachment屬性設定背景映像是否固定或者隨著頁面的其餘部分滾動，當設定為fixed時頁面的其餘部分滾動時，背景映像不會移動。
代碼( 用了百度的星空圖，效果和上面百度的一至 )：
HTML：

<p id="con"></p>

CSS：

body{ margin:0; padding:0;} #con{ position:absolute; top:0; left:0; height:100%; width:100%; background-image:url("maskimg/star.jpg"); background-position: center 0; background-repeat: no-repeat; background-attachment:fixed; background-size: cover; -webkit-background-size: cover;/* 相容Webkit核心瀏覽器如Chrome和Safari */ -o-background-size: cover;/* 相容Opera */ zoom: 1; }

方法二.不把圖片作為背景，而是使用<img>標籤，效果是圖片尺寸不會隨瀏覽器縮放而變化，但是如果有豎直捲軸時，圖片不會固定而會隨捲軸移動。只需要把圖片的寬度width設定成100%就行了。
代碼很簡單，只有幾行，用的還是百度的星空圖：
HTML：

<p id="con"><img id="pic" src="maskimg/star.jpg"></p> _fcksavedurl=""maskimg/star.jpg"></p>"

CSS：

body{ margin:0; padding:0;} #pic{ width:100%;}

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！