如何使用CSS3属性background-origin控制位置

2024-11-06 11:25:10

1、第一步,在HBuilder创建的web目录下,新建页面backgroundOrigin.html,如下图所示:

如何使用CSS3属性background-origin控制位置

2、第二步,在<body></body>元素内插入一个div标签,然后在div标签内插入一个无序列表,如下图所示:

如何使用CSS3属性background-origin控制位置

3、第三步,利用class选择器设置div标签样式属性,设置宽度和高度为600px,字体属性,如下图所示:

如何使用CSS3属性background-origin控制位置

4、第四步,设置完毕后保存代码,在浏览器上查看页面显示的效果,如下图所示:

如何使用CSS3属性background-origin控制位置

5、第五步,再次使用元素选择器设置p元素的样式,背景使用图片,设置宽度和高度,如下图所示:

如何使用CSS3属性background-origin控制位置如何使用CSS3属性background-origin控制位置

6、第六步,分别使用类选择器设置无序列表项的样式,使用background-origin,取不同的属性值,如下图所示:

如何使用CSS3属性background-origin控制位置
猜你喜欢