1. div裡面的背景,怎麼縮放到和div大小一樣
CSS3已經可以滿足你的要求,寫法如下:
div{background-size:50px 50px;height:50px;width:50px;}
但這種寫法低版本的瀏覽器(如IE6等)是不支持的,只能處理圖片到需要的尺寸了。
如你補充的問題就簡單了,不需要CSS3,直接設置背景圖片:
body{background:url(圖片路徑) no-repeat scroll 50% 0;}
no-repeat不平鋪
50%左右居中
0居頂
這裡面的值根據實際需要進行設置就可以了。
2. 如何使背景圖片隨著div的大小進行縮放
沒有這樣的辦法。除非變通一下,用絕對定位,進行兩個層的疊放。
3. div+css如何改變背景圖片大小
主要有以下幾種方法:
1-把圖片放在div的背景圖里,再利用css3的background-size屬性,語法:
background-size:length|percentage|cover|contain;
這個CSS3的屬性作用是把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域,背景圖像的某些部分也許無法顯示在背景定位區域中,如果不使用這個屬性,在IE11和FireFox中縮放瀏覽器,背景圖片會隨之縮小,同時使用-webkit-background-size: cover和-o-background-size: cover兼容webkit內核瀏覽器和Opera瀏覽器;background-attachment屬性設置背景圖像是否固定或者隨著頁面的其餘部分滾動,當設置為fixed時頁面的其餘部分滾動時,背景圖像不會移動。
2-如果是有規律變化的圖,可以將圖片單獨切出來,然後repeat-x或者repeat-y進行平鋪,也是一個不錯的方法,而且圖片可以切得不用那麼大,也對圖片進行充分利用。
3-將圖片寫在img標簽里,然後對圖片和div進行相對定位/絕對定位,效果是圖片尺寸不會隨瀏覽器縮放而變化,但是如果有豎直滾動條時,圖片不會固定而會隨滾動條移動。只需要把圖片的寬度width設置成100%就行了。
4. div+css 如何讓背景圖片橫向縮小
不可能。
作為背景的圖片,其長寬尺寸不能控制,只能控制其顯示出來的大小以及位置。
如果擔心載入速度,那就少用圖片,或者盡量壓縮圖片,或者使用小容量的圖片,同時盡量使用平鋪等CSS規則。非有必要不必更換背景圖片。
5. div 背景圖片的大小怎麼調整成適應div區域的大小,是背景圖片哦
position-size: 100% 100%;
不過ie低版本不支持此屬性。可以把背景換成Img標簽,做個浮動即可,絕對沒有其他問題
6. div+css怎麼讓背景圖片自動縮放
.imgDiv{
width:500px;
height:500px;
background-image:url('../images/index.jpg');
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
-moz-border-image: url(./btn.png) 0;
background-repeat:no-repeat9;
background-image:none9;
(此處空一行)
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index.jpg', sizingMethod='scale')9;
}
(6)div中的背景圖片如何設置縮放擴展閱讀:
css控制背景圖片自動伸縮自適應的小技巧
例子如下:
.picLUp{
background:url(logo.png)no-repeat;
width:100%;height:40%;
background-size:100%100%;
}
語法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
屬性:
enabled:
可選項,布爾值(Boolean),設置或檢索濾鏡是否激活。true | false
true:
默認值,濾鏡激活。
false:
濾鏡被禁止。
sizingMethod:
可選項,字元串(String),設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。
7. 在html中如何設置div的的大小當圖片尺寸超過div設置的大小的時候自動縮放,不適用img
具體步驟如下:
1、首先,先在代碼中輸入position:fixed; top: 0; left: 0;這樣的作用是讓整個圖片固定在屏幕上。