背景的裁剪和快速定位

发表于 2020-08-08| 更新于 2020-08-05|前端

字数总计: 1.1k|阅读时长: 5 分钟|阅读量:

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;
}

资源文件：

文章作者: Jachie Xie

文章链接: https://xjc5772.github.io/2020-08/08/%E5%AD%A6%E4%B9%A0/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/CSS/%E8%83%8C%E6%99%AF%E7%9A%84%E8%A3%81%E5%89%AA%E5%92%8C%E5%BF%AB%E9%80%9F%E5%AE%9A%E4%BD%8D/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 XJC&Blog！

前端移动开发

微信
支付宝

相关推荐

移动端的tap事件

bootstrap栅格系统

Normalize&reset区别

评论

本地搜索

由 hexo-generator-search 提供支持