首頁 > 開發者 > JavaScript
CSS 實現背景圖尺寸不隨瀏覽器縮放而變化，css背景圖
<!-- Author:部落格園小dee -->
一些網站的首頁背景圖尺寸不隨瀏覽器縮放而變化，例如百度個人版的首頁，縮放後背景圖的尺寸並不改變：
再比如花瓣網( 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：
<div id="con"></div>
CSS：
1 body{ margin:0; padding:0;} 2 #con{ 3 4 position:absolute; 5 top:0; 6 left:0; 7 height:100%; 8 width:100%; 9 background-image:url("maskimg/star.jpg"); 10 background-position: center 0;11 background-repeat: no-repeat;12 background-attachment:fixed;13 background-size: cover;14 -webkit-background-size: cover;/* 相容Webkit核心瀏覽器如Chrome和Safari */15 -o-background-size: cover;/* 相容Opera */16 zoom: 1; 17 }
方法二.不把圖片作為背景，而是使用<img>標籤，效果是圖片尺寸不會隨瀏覽器縮放而變化，但是如果有豎直捲軸時，圖片不會固定而會隨捲軸移動。只需要把圖片的寬度width設定成100%就行了。
代碼很簡單，只有幾行，用的還是百度的星空圖：
HTML：
<div id="con"><img id="pic" src="maskimg/star.jpg"></div>
CSS：
1 body{ margin:0; padding:0;}2 #pic{ width:100%;}
頭一次見有人提問css方面的問題居然是絕大部分用中文的，有點還沒搞清楚你想問什麼
如果你是想問讓背景圖片一直處於背景中心的話，那麼樣式如下
background:url(圖片路徑) center no-repeat;
但如果是還想讓圖片的尺寸隨著瀏覽器的大小放大縮小的話，那麼就挺難辦了，我大概給一個簡單處理吧
1、如果樓主只是將其當做一張圖片顯示，可以通過css控制，如img{width:100%;height:100%;}.
否則需要將其作為網頁背景的話可以試試如下方法：
2、如果這張圖片為背景圖片由於背景圖片不具有伸縮性，只能通過別的方法繞著解決，在ie中可以用<body
style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">，實現背景展開鋪滿整個瀏覽器，但其它的瀏覽器不支援。
這時可以拐個彎，設定兩層div，底層div當做背景使用，放置一張圖片即可。
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>
再將網頁內容放置到第二層上<div id="content">頁面內容</content>
3、網頁背景圖片預設情況下是重複平鋪滿整個頁面。上面2方法是要求圖片不重複，但又得佔滿瀏覽器所採用的方法。
問CSS可以實現背景圖片展開? (即把瀏覽器放大或縮小後都是顯示一個完整的不重複的圖片)
你好:
使用javascript動態改變圖片的大家就可以了;
希望可以協助到你;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
