多级背景图的层叠设计 backgroundImage

A_one2010

于 2025-06-18 12:01:52 发布

阅读量146

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/A_one2010/article/details/148736370

在开发中，需要给一个区域设置多套背景图或者背景色。

1 花在上，背景图在下，backgroundImage 第一个放置花，再放置色值，效果如下：

.back-bg{
    margin-top:30px;
    height:300px;
    background-image:  url('https://www.w3cschool.cn/statics/images/course/img_flwr.gif'),
    linear-gradient(to right,red 0%,blue 50%,yellow 100%);
    background-repeat: no-repeat, no-repeat;
    background-size:350px 200px,100% 50%;
    background-position:right 20px top 20px,left bottom;
 }

2 将上述 url及对应的size,position 调整，则背景色覆盖在花之上，效果如下：

background-image:  linear-gradient(to right,red 0%,blue 50%,yellow 100%),
 url('https://www.w3cschool.cn/statics/images/course/img_flwr.gif');
background-repeat: no-repeat, no-repeat;
background-size:100% 50%,350px 200px;
background-position:left bottom,right 20px top 20px;