css图片显示区域 |css我要自学

.demo {
background-image: url('example.jpg');
}

但是，有时候图片的大小和元素的大小并不一致，这时候大家可以使用background-size属性来解决这个问题。该属性可以用来设置背景图片的大小，可以设置具体的像素值，也可以使用类似于cover、contain这样的几个关键词，对于不同的情况采用不同的处理方式。

.demo {
background-image: url('example.jpg');
background-size: cover; /* 或者 background-size: contain; */
}

而有时候大家并不想要显示整个图片，而只是想显示图片的某个区域，这时候大家可以使用background-position属性。该属性可以用来设置背景图片的显示位置，可以设置具体的像素值，也可以使用类似于top、bottom、left、right、center这样的关键词，对于不同的情况采用不同的处理方式。

.demo {
background-image: url('example.jpg');
background-size: cover;
background-position: center;  /* 或者 background-position: 50% 50%; */
}

总的来说，使用CSS的background属性可以非常方便的将一张图片作为元素的背景，而使用background-size和background-position可以进一步控制图片的大小和显示位置，达到更好的效果。