CSS3资料之背景

最新推荐文章于 2022-10-25 15:17:23 发布

宅羽

最新推荐文章于 2022-10-25 15:17:23 发布

阅读量152

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/sky6even/article/details/88540176

版权

CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

◆ 背景尺寸：

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

background-size:100px 100px;

设置为cover时，自动调整缩放比例，图片完全覆盖盒子，如有溢出部分则会被隐藏。

background-size: cover;

设置为contain时，背景图片会完全等比例显示盒子中，有可能不会铺满盒子。

background-size: contain;

◆ 背景原点：

通过background-origin可以设置背景图片从什么地开始平铺

其参数设置如下：

border-box：以边框做为参考原点

background-origin: border-box;

padding-box：以内边距做为参考原点

background-origin: padding-box;

content-box：以内容区做为参考点

background-origin: content-box;

◆ 背景裁剪：

通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。

其参数设置如下：

border-box：裁切边框以内为背景区域

background-clip: border-box;

padding-box裁切内边距以内为背景区域

background-clip: padding-box;

content-box裁切内容区做为背景区域

background-clip:content-box;

◆ 多背景：

以逗号分隔可以设置多背景，可用于自适应布局

background:url(images/bg1.png) no-repeat left top,
                        url(images/bg2.png) no-repeat right top,
                         url(images/bg4.png) no-repeat left bottom,
                         url(images/bg3.png) no-repeat right bottom,
                        url(images/bg5.png) no-repeat center center;

◆ 案例：

全屏背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 背景</title>
    <style>
            html{
                height: 100%;
            }
            body{
                    height: 100%;
                    margin: 0px;
                    padding: 0px;
            }
            /*高度继承的是body，body 是0*/
            .pic{
                    width: 100%;
                    height: 100%;
                    background-image: url("../images/1.jpg");
                    /*
                      1、可以调节背景图片的尺寸.
                      2、背景图片的尺寸可以随着父盒子的高宽的改变而改变。随着父盒子的高宽的改变，背景图片等比缩放，做屏幕适配。
                    */
                    background-size: cover;
                    background-repeat: no-repeat;
            }
    </style>
</head>
<body>
    <div class="pic"></div>
</body>
</html>