CSS中,插入两张背景图片比较常见,一般用于背景图层的叠加,下面介绍两种常用的方法:第一种方法:使用background属性background: url(image1.jpg) no-repeat
CSS中,插入两张背景图片比较常见,一般用于背景图层的叠加,下面介绍两种常用的方法:
第一种方法:使用background属性
background: url(image1.jpg) no-repeat center center, url(image2.jpg) no-repeat center center fixed;
上面的代码中,background属性中用逗号隔开了两个子属性,分别表示两张背景图片的URL地址。第一个子属性的no-repeat参数表示背景图片不要重复,center参数表示居中对齐。第二个子属性的fixed参数表示背景图片不随页面滚动而滚动,这一步可选择性添加。
第二种方法:使用多个background属性
background-image: url(image1.jpg), url(image2.jpg); background-repeat: no-repeat, no-repeat; background-position: center center, center center; background-attachment: scroll, fixed;
上面的代码中,分别是使用了多个background-image、background-repeat、background-position和background-attachment属性,分别对应两张背景图片的URL地址、是否重复、位置和固定性。需要注意的是,这四个属性的属性值之间要一一对应,且都要写上。
总之,这两种方法在实现两张背景图片时均可使用,具体选择哪种方法可以根据自己的需求来定。
粉丝
0
关注
0
收藏
0