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

CSS中设置背景图的方法很多，但有时候会遇到背景图太大而无法完整显示的情况。这时，我们可以通过以下几个步骤来把背景图变小。.step1 { backgroundimage: url(bg.jpg); ...

CSS中设置背景图的方法很多，但有时候会遇到背景图太大而无法完整显示的情况。这时，我们可以通过以下几个步骤来把背景图变小。

.step1 {
  background-image: url('bg.jpg'); /*设置背景图*/
  background-size: cover; /*将背景图完全覆盖*/
  background-repeat: no-repeat; /*设置背景图不重复*/
}

/*以上为原本的设置，以下是把背景图变小的设置*/

.step2 {
  background-size: contain; /*让背景图完整显示*/
  background-position: center center; /*将背景图居中*/
}

.step3 {
  width: 50%; /*按需设置宽度，使背景图变小*/
  height: 50%; /*按需设置高度，使背景图变小*/
} 

以上三步是将背景图变小的主要步骤。在第一步中，我们设置了背景图，并让其完全覆盖背景区域，以避免背景图的失真。在第二步中，我们把背景图的大小改为contain，这样就可以让背景图完整显示出来。同时，我们还设置了背景图在背景区域中居中显示。最后，在第三步中，我们可以根据需求设置背景图的大小，从而实现背景图变小的效果。