背景的裁剪和快速定位

最新推荐文章于 2022-07-14 11:35:18 发布

空白

最新推荐文章于 2022-07-14 11:35:18 发布

阅读量246

点赞数 1

分类专栏： CSS 学习文章标签： css3

本文链接：https://blog.csdn.net/qq_38496329/article/details/107809636

版权

学习同时被 2 个专栏收录

105 篇文章 2 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

background-origin

语法

background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

现在让我们回到background-origin这个属性上来，它的三个值就好理解了。在CSS中页面的渲染性格是由页面左上角开始的，那么

border-box就是把背景图片的坐标原点设置在盒模型border-box区域的左上角

padding-box就是把背景图片的坐标原点设置在盒模型padding-box区域的左上角

content-box就是把背景图片的坐标原点设置在盒模型content-box区域的左上角

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div {
            border: 10px solid black;
            padding: 35px;
            background-image: url('smiley.gif');
            background-repeat: no-repeat;
            background-position: left;
        }

        #div1 {
            background-origin: border-box;
        }

        #div2 {
            background-origin: content-box;
        }

        #div3 {
            background-origin: padding-box;
        }
    </style>
</head>

<body>

    <p>背景图像边界框的相对位置：</p>
    <div id="div1">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

    <p>背景图像的相对位置的内容框：</p>
    <div id="div2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

    <p>背景图像内边距的相对位置</p>
    <div id="div3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>
</body>

</html>

background-clip

语法

background-clip: border-box|padding-box|content-box;

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        #example1 {
            border: 10px dotted black;
            padding: 35px;
            background: yellow;
        }

        #example2 {
            border: 10px dotted black;
            padding: 35px;
            background: yellow;
            background-clip: padding-box;
        }

        #example3 {
            border: 10px dotted black;
            padding: 35px;
            background: yellow;
            background-clip: content-box;
        }
    </style>
</head>

<body>

    <p>没有背景剪裁 (border-box没有定义):</p>
    <div id="example1">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: padding-box:</p>
    <div id="example2">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: content-box:</p>
    <div id="example3">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna aliquam erat volutpat.</p>
    </div>

</body>

</html>

案例练习

页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>Document</title>
    <link rel="stylesheet" href="css/category.css">
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
    <!--全屏容器-->
    <div class="jd-layout">
        <header class="jd-topBar">
            <a href="#" class="icon-back"></a>
            <a href="#" class="icon-menu"></a>
        </header>
    </div>
</body>

</html>

CSS：

html,
body {
    height: 100%;
}

.jd-layout {
    width: 100%;
    height: 100%;
    background: pink;
}

.jd-topBar {
    width: 100%;
    height: 45px;
    border-bottom: 1px solid #ccc;
    background: url("../images/header-bg.png") 0 0/1px 44px;
}

.jd-topBar a {
    width: 40px;
    height: 44px;
    padding: 12px 10px;
    position: absolute;
    top: 0;
    /* 让背景图从内容开始平铺 */
    background-origin: content-box;
    /* 没有对背景图做任何裁剪  背景图默认就是从边框显示*/
    /* 默认:
    border-box 边框以外被裁剪掉 
    padding-box 内边距以外被裁剪掉 
    content-box 内容以外被裁剪掉 
    */
    background-clip: content-box;
}

.jd-topBar .icon-back {
    left: 0;
    background-position: -20px 0;
}

.jd-topBar .icon-menu {
    right: 0;
    background-position: -60px 0;
}

/* 使用精灵图的公用样式 */
[class^="icon-"] {
    background-repeat: no-repeat;
    background-image: url("../images/sprites.png");
    background-size: 200px 200px;
}