多重背景图片

最新推荐文章于 2024-06-16 22:13:37 发布

jwz934738949

最新推荐文章于 2024-06-16 22:13:37 发布

阅读量336

点赞数

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/92009483

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

背景图片不仅仅可以是一张，也可以是多张，这叫做多重背景图片。

格式：

1、简写

多个背景图片使用逗号来隔开。

例如：background: url("1.png") no-repeat 0px 0px,url("2.png") no-repeat 100px 0px,url("3.png") -100px 100px;

2、分开编写

例如：

background-image: url("1.png") ,url("2.png") ,url("3.png") ;

background-repeat: no-repeat,no-repeat,no-repeat;

background-position: 0px 0px,100px 0px,-100px 100px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .c1 {
        height: 800px;
        width: 800px;
        border: 1px solid #000;
        background: url("1.jpg") no-repeat 0px 0px, url("2.png") no-repeat top right;
    }

    .c2 {
        height: 800px;
        width: 800px;
        border: 1px solid #000;
        background-image: url("1.jpg"), url("2.png");
        background-repeat: no-repeat, no-repeat;
        background-position: 0 0, top right;
    }
</style>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多重背景图片

背景图片不仅仅可以是一张，也可以是多张，这叫做多重背景图片。格式：1、简写多个背景图片使用逗号来隔开。例如：background: url("1.png") no-repeat 0px 0px,url("2.png") no-repeat 100px 0px,url("3.png") -100px 100px;2、分开编写例如： backgro...
复制链接

扫一扫

专栏目录