backgroundimage怎么更改图片大小 样式
时间: 2023-11-25 14:07:11 浏览: 67
改变图片大小
要更改背景图片的大小和样式,可以使用background-size属性和background-position属性。
background-size属性用于设置背景图像的尺寸,可以使用以下值:
- auto:默认值,背景图像的原始尺寸。
- cover:背景图像铺满整个背景区域,保持纵横比例,并且图像中的某个部分可能会被裁剪。
- contain:背景图像尽可能大地显示在背景区域内,但是仍然保持纵横比例,并且图像的某些部分可能不会被填充。
示例代码:
```
background-image: url("image.jpg");
background-size: cover;
```
background-position属性用于设置背景图像的位置,可以使用以下值:
- top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right:分别指定图像在背景区域内的位置。
- 百分比值:例如50% 50%,将背景图像的中心点放置在背景区域的中心点。
- 数值:例如50px 20px,将背景图像的左上角放置在距离背景区域的左边缘50px,距离背景区域的上边缘20px的位置。
示例代码:
```
background-image: url("image.jpg");
background-size: cover;
background-position: center center;
```
阅读全文