大背景图居中 background多背景

最新推荐文章于 2023-07-20 17:27:11 发布

卡夫卡的baby

最新推荐文章于 2023-07-20 17:27:11 发布

阅读量200

点赞数

分类专栏： css 文章标签： java servlet 服务器

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125712981

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、大背景图居中

代码如下：

<title>大背景图居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
           
        }
        body{
            background-color: #051022;
            background-image: url(./image/bg.png);
            background-repeat: no-repeat;
            /* 背景居中 */
            /* 我们希望大背景图，在水平方向上居中 在垂直方向上居定（意思就是这个图垂直方向不动） */
            background-position: center center;
            background-size: cover;
        }
    </style>

预览：

2、background多背景

background的多重背景加background-position定位

代码如下：

 <title> background多背景</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #f1f1f1;
            /* 多重背景，使用逗号间隔设置，你先设置的背景，写在后面 */
            background: url(./image/1.webp) , url(./image/14.webp);
            background-repeat: no-repeat;
            /* 多重背景的定位点，使用逗号间隔设置，你先设置的定位点，写在后面 */
            background-position: right bottom, center top;
            background-attachment: fixed;
        }
       
    </style>
</head>
<body>
   
    <div class="container">

    </div>

预览：