方法一. 把圖片作為background?

有幾個CSS的屬性要提一下：background-size：cover，這個CSS3的屬性作用是把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域，背景圖像的某些部分也許無法顯示在背景定位區(qū)域中，如果不使用這個屬性，在IE11和FireFox中縮放瀏覽器，背景圖片會隨之縮小，同時使用-webkit-background-size: cover和-o-background-size: cover兼容webkit內(nèi)核瀏覽器和Opera瀏覽器；background-attachment屬性設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動，當(dāng)設(shè)置為fixed時頁面的其余部分滾動時，背景圖像不會移動。

HTML：?

代碼如下: <div id="con"></div>?

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內(nèi)核瀏覽器如Chrome和Safari */?
-o-background-size: cover;/* 兼容Opera */?
zoom: 1;?
}?

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

HTML：?

代碼如下: <div id="con"><img id="pic" src="maskimg/star.jpg"></div> _fcksavedurl=""maskimg/star.jpg"></div>"?

CSS：?

代碼如下:
body{ margin:0; padding:0;}?
#pic{ width:100%;}?

轉(zhuǎn)載于:https://www.cnblogs.com/lpshan/p/4481127.html

總結(jié)

以上是生活随笔為你收集整理的两种方法可以达到背景图不缩放的效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。