CSS 中的背景圖片設(shè)置大小有多種方法,下面將介紹三種常見方法:
方法一:使用 background-size 屬性
background-size 屬性的取值包括 cover、contain 和具體的像素值等。其中,cover 可以讓圖片鋪滿整個(gè)背景區(qū)域,并自動(dòng)裁剪多余部分。而 contain 則盡量在不拉伸或扭曲圖片的前提下,使圖片完全顯示。
例如:
p{
background: url('圖片地址') no-repeat center center;
background-size: cover;
}
方法二:使用 CSS3 中的 background-clip 屬性
background-clip 屬性可以設(shè)置背景顏色或背景圖像顯示的區(qū)域。如果將其設(shè)置為 border-box,則背景圖片會(huì)相對(duì)于元素本身進(jìn)行縮放。另外,可以使用 background-origin 屬性控制背景圖片的起始位置,例如 padding-box、content-box 等。
例如:
p{
background: url('圖片地址') no-repeat center center;
-webkit-background-clip: border-box;
-moz-background-clip: border-box;
background-clip: border-box;
-webkit-background-origin: padding-box;
-moz-background-origin: padding-box;
background-origin: padding-box;
}
方法三:使用圖片的尺寸屬性
如果知道圖片的原始尺寸,也可以在 CSS 中將其設(shè)置為背景圖片的大小。這種方法需要在 background 屬性中分別設(shè)置屬性值,分別為圖片寬度和高度。
例如:
p{
background: url('圖片地址') no-repeat center center;
background-size: 500px 300px; /* 假設(shè)圖片寬度為 500px,高度為 300px */
}
以上三種方法都可以用來設(shè)置背景圖片的大小。需要根據(jù)實(shí)際需求和圖片尺寸來選擇合適的方式。
上一篇css中背景顏色透明