欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css1.0~3.0背景图使用多张折叠的概念与方法

程序员文章站 2022-07-01 15:50:47
需求:使用多张图片作为页面的背景图; 首先需要了解background的属性以及细节知识:https://www.cnblogs.com/chenglj/p/7372996.html background-image:url("1.jpg"),url("2.jpg"),url("3.jpg"); b ......

需求:使用多张图片作为页面的背景图;

首先需要了解background的属性以及细节知识:

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;  
background-position: 0 0, 200px 0, 400px 201px; 
如上写法;
可以通过调整图片的顺序显示哪张图片在最上端。

然后,需要了解关于background-position的具体用法:

相对坐标原点进行位置调整,或者使用

left, right, top, bottom, left top, left bottom, right top, right, bottom

分别表示,从左往右,从右往左,从上往下,从下往上,从左上往右下,从……(都懂的,不全写了)

暂时至此。