[分享]css写背景图片怎样改变大小

 CSS 写背景图片怎样改变大小？CSS 是网页设计中必不可少的一部分，可以控制网页文本的样式、布局、颜色等效果。当然也包含了背景相关的控制，其中一个重要的方面就是 CSS 背景图片的设计。如果想要改...

 CSS 写背景图片怎样改变大小？
CSS 是网页设计中必不可少的一部分，可以控制网页文本的样式、布局、颜色等效果。当然也包含了背景相关的控制，其中一个重要的方面就是 CSS 背景图片的设计。
如果想要改变 CSS 背景图片的大小，有以下几种方法：
1. 使用 background-size 属性
background-size 属性可以控制 CSS 背景图片的尺寸。默认值为 auto，即按照原始尺寸进行显示，但也可以设置为 cover 或 contain。
cover 的意思是覆盖，即将背景图片缩放至完全覆盖元素，可能会出现部分图片被裁剪。contain 的意思是包含，即将背景图片缩放至完全包含元素，可能会出现元素背景填充不满整个元素的情况。
例如，将背景图片设置为 cover：

html
<style>
    .bg {
        background-image: url(./image.jpg);
        background-size: cover;
    }
</style>

<div class="bg">这是背景</div> 

2. 使用 background-repeat 属性
background-repeat 属性用于设置 CSS 背景图片是否重复。如果背景图片比元素小，那么它可以通过在元素上重复显示来填充整个背景。
可以设置为 no-repeat、repeat-x 或 repeat-y，分别代表不重复、水平重复和竖直重复。
例如，设置不重复：

html
<style>
    .bg {
        background-image: url(./image.jpg);
        background-repeat: no-repeat;
    }
</style>

<div class="bg">这是背景</div> 

3. 使用 background-position 属性
background-position 属性用于设置 CSS 背景图像的位置。可以设定为长度单位、百分比等。默认值为 center center。
例如，将背景图片右下角对齐：

html
<style>
    .bg {
        background-image: url(./image.jpg);
        background-position: right bottom;
    }
</style>

<div class="bg">这是背景</div> 

总之，通过调整 background-size、background-repeat 和 background-position 属性，可以使 CSS 背景图片更加美观。