❶ 網頁中控制圖片縮放比例_html設置圖片按比例縮放
可以通過background-size屬性來設定背景圖片的大小。它可以是像素(px)或者是百分比(%),舉例說明:background-size:950px*200px這表示把背景圖片大小調整為寬度950像素,高度200像素。
1、background-size的語法說明:
(1)屬性名:background-size
(2)屬性值:其中bg-size=[||auto]{1,2}|cover|
contain
(3)初始值:autoauto
(4)應用於:所有元素
(5)繼承性:無
(6)百分比:後面會說明
(7)計算值:根據指定
2、代碼說明:
/*一個值:這個值指定圖片寬度,第二個值為auto*/
background-size:auto
background-size:50%
background-size:3em
background-size:12px
/*兩個值:第一個值指定圖片的寬度,第二個值指定圖片的高度*/
background-size:50%auto
background-size:3em25%
background-size:auto6px
background-size:autoauto
/*多重背景,用逗號隔開,在CSS語法中凡語法後跟*或者#,都是可以無限重復的,但必須用逗號隔開。*/
background-size:auto,auto/*請區別於background-size:autoauto*/
background-size:50%,25%,25%
background-size:6px,auto,contain
background-size:inherit
(1)html中怎麼設置背景圖片大小擴展閱讀:
背景重復:
如果需要在頁面上對背景圖像進行平鋪,可以使用background-repeat屬性。
屬性值repeat導致圖像在水平垂直方向上都平鋪,就像以往背景圖像的通常做法一樣。repeat-x和repeat-y分別導致圖像只在水平或垂直方向上重復,no-repeat則不允許圖像在任何方向上平鋪。
背景圖像將從一個元素的左上角開始。如下:
body
{
background-image:url(/i/eg_bg_03.gif);background-repeat:repeat-y;
}
背景定位:
可以利用background-position屬性改變圖像在背景中的位置。
下面的例子在body元素中將一個背景圖像居中放置:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;background-position:center;
}
為background-position屬性提供值有很多方法。首先,可以使用一些關鍵字:top、bottom、left、right和center。通常,這些關鍵字會成對出現,不過也不總是這樣。還可以使用長度值,如100px或5cm,最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。
❷ htmL中怎麼插入背景圖片如何設置背景圖片大小
CSS里設置這兩個參數:
背景圖background: url(/*圖片路徑*/) repeat-x/*平鋪方式*/;
尺寸:backgroun-size:100% 100%。