[分享]css中怎么吧背景图变小

CSS中怎么把背景图变小？/ 假设我们有一个div元素要设置背景图 / div { backgroundimage: url(bg.jpg); / 可以使用背景图的属性来定义背景图的位置，以下是两个例...

CSS中怎么把背景图变小？

/* 假设我们有一个div元素要设置背景图 */
div {
    background-image: url('bg.jpg');
    /* 可以使用背景图的position属性来定义背景图的位置，以下是两个例子 */
    background-position: center center; /* 让背景图在元素中心显示 */
    background-position: 0 0; /* 让背景图在元素的左上角显示 */
    
    /* 现在我们来设置如何让背景图变小 */
    background-size: 50%; /* 让背景图变成容器的50%大小 */
    
    /* 如果要强制保持图片的宽高比 */
    background-size: auto 80%; /* 让背景图宽度自适应，高度为容器高度的80% */
    
    /* 如果要让背景图不重复 */
    background-repeat: no-repeat; /* 让背景图不重复 */
}