css两张背景图片如何插入

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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地址、是否重复、位置和固定性。需要注意的是,这四个属性的属性值之间要一一对应,且都要写上。

总之,这两种方法在实现两张背景图片时均可使用,具体选择哪种方法可以根据自己的需求来定。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两张背景图片如何插入

粉丝

0

关注

0

收藏

0

已有0次打赏