[分享]css两种方式设置背景图大小

CSS是一种用于排版与设计网页元素的语言，在CSS中，我们可以设置许多元素的样式，包括背景图。但是在设置背景图时，我们有两种方式可以设置背景图的大小。这两种方式分别是：backgroundsize和b...

CSS是一种用于排版与设计网页元素的语言，在CSS中，我们可以设置许多元素的样式，包括背景图。但是在设置背景图时，我们有两种方式可以设置背景图的大小。这两种方式分别是：background-size和background-repeat。下面我们来详细了解各种方法的使用方法和意义。
一、background-size
background-size属性可以帮助我们设置背景图像的尺寸。这个属性有两个值，它们分别是：width，height。
1.1 指定固定尺寸
我们可以直接给出一个生成后的背景图片的固定尺寸。例如：

background-size: 100px 100px;   //width: 100px, height: 100px; 

这行代码表示将背景图片的宽度设置为100px，高度设置为100px。
1.2 指定百分比尺寸
除了直接指定固定尺寸之外，我们也可以使用百分比来设置背景图片的尺寸。例如：

background-size: 50% 50%;   //width: 50%, height: 50%; 

这个属性表示将背景图片的宽度设置为50%，高度设置为50%。
二、background-repeat
background-repeat属性表示我们希望如何重复已设置的背景图像。它同样有两个值，分别是：repeat和no-repeat。
2.1 repeat
如果我们将背景图像的值设置为repeat，那么这个图像将水平和垂直地重复填满整个容器。例如：

background-repeat: repeat; 

这个属性表示希望让背景图片在水平方向和垂直方向上重复填满整个容器。
2.2 no-repeat
如果我们将背景图像的值设置为no-repeat，那么这个图像将只显示一次，并且它的大小将会被拉伸或缩小以填满整个容器。例如：

background-repeat: no-repeat; 

这个属性表示希望让背景图片仅显示一次，并且会被拉伸或缩小以填满整个容器。
总结：
以上就是CSS设置背景图的两种方式，其中background-size和background-repeat属性可以很好地帮助我们控制背景图像的尺寸和重复填充。这些属性不仅可以让我们的网站更美观，同时也可以在展示一些信息时更有趣。