多语言展示
当前在线:453今日阅读:186今日分享:38

CSS如何定义背景图片的显示方式

在实际开发工作中,常常需要定义HTML元素背景图片的显示方式,不同的显示方式有不同的效果,下面举例讲解如何使用CSS定义背景图片的显示方式。
方法/步骤
1

新建一个HTML文件,文件命名为test.html文件,用于测试背景图片的显示方式。

2

在test.html页面中,定义一个长500px,高400px,带边框的div元素。图:

3

为div元素设置一个重复的背景图片,铺满整个div元素。主要通过设置background-repeat: repeat来实现 。

4

为div元素设置一个水平方向重复的背景图像。主要通过设置background-repeat: repeat-x来实现。

6

设置div元素的背景图像只显示一次。主要通过设置background-repeat: no-repeat来实现。

7

使用%来定位背景图像的显示位置。主要通过设置background-position的x轴,y轴的位置来确定背景图像的位置。

推荐信息