如何使用CSS3中的属性设置指定背景图片的尺寸

2024-11-05 04:49:51

1、第一步,双击打开HBuilderX工具,新建静态页面并在body元素中插入div标签,如下图所示:

如何使用CSS3中的属性设置指定背景图片的尺寸如何使用CSS3中的属性设置指定背景图片的尺寸

2、第二步,使用元素选择器设置div的宽度、高度、行高、文字居中、内外边距等,如下图所示:

如何使用CSS3中的属性设置指定背景图片的尺寸如何使用CSS3中的属性设置指定背景图片的尺寸

3、第三步,在第二步中的div选择器中,添加背景属性和背景图片尺寸大小,如下图所示:

如何使用CSS3中的属性设置指定背景图片的尺寸如何使用CSS3中的属性设置指定背景图片的尺寸

4、第四步,设置值为auto,如果想要设置具体大小,可以使用两个具体的值,如下图所示:

如何使用CSS3中的属性设置指定背景图片的尺寸如何使用CSS3中的属性设置指定背景图片的尺寸

5、第五步,除了使用具体的数字之外,还可以使用百分比,对应的比例为0%到100%,如下图所示:

如何使用CSS3中的属性设置指定背景图片的尺寸如何使用CSS3中的属性设置指定背景图片的尺寸

6、第六步,如果想要让背景图片保持本身的宽高比例,需要设置为contain,如下图所示:

如何使用CSS3中的属性设置指定背景图片的尺寸如何使用CSS3中的属性设置指定背景图片的尺寸
猜你喜欢