background-origin背景图片定位参考系&background-clip背景裁剪[专栏1]

最新推荐文章于 2024-04-19 09:39:59 发布

大怪冰

最新推荐文章于 2024-04-19 09:39:59 发布

阅读量249

点赞数 1

分类专栏： #background属性及属性值全家桶文章标签： html 前端 css css3

本文链接：https://blog.csdn.net/m0_72870863/article/details/126099812

版权

#background属性及属性值全家桶专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3中`background-origin`和`background-clip`两个属性，分别讲解了它们的作用和用法。`background-origin`定义了背景图片的定位参考系，而`background-clip`决定了背景图片的裁剪区域。文章通过多个实例比较了两者同时设置的效果，帮助读者深入理解这两个属性的差异。

摘要由CSDN通过智能技术生成

一、background-origin背景图片定位参考系

二、background-clip背景裁剪

三、background-origin与background-clip同时设置的比较

一、background-origin背景图片定位参考系

ackground-origin值	含义
border-box	背景图片相对于元素border区域进行定位
padding-box（默认值）	背景图片相对于元素padding区域进行定位
content-box	背景图片相对于元素content区域进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-origin</title>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        body{
            background-color: burlywood;
        }
        #Box{
            width: 1800px;
            height: 400px;
            background-color: gray;
            margin: 200PX auto;
        }
        div[class^="box"]{
            width: 344px;
            height: 296px;
            background-color: rgb(28, 68, 154);
            /* 使4个盒子的边框为15px */
            border: 15px dashed rgb(236, 20, 20);
            /* 使4个盒子显示在一行 */
            float: left;
            /* 设置每个盒子外边距10px */
            margin: 10px;
            /* 设置每个盒子内边距10px */
            padding: 20px;
            /* 每个盒子都设置背景，不平铺 */
            background-image: url(./flower.jpg) ;
            background-repeat:no-repeat;
        }
        
        .box2{
            background-origin: border-box;
        }
        .box3{
            
            background-origin: padding-box;
        }
        .box4{
            background-origin: content-box;
        }
    </style>
</head>
<body>
    <div id="Box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

二、background-clip背景裁剪

background-clip:border-box; 图像从边框（包括border区域）开始裁剪（默认值），表示裁剪超出边框区的内容

background-clip:padding-box; 图像从内边距（包括padding）开始裁剪，表示裁剪超出内填充区的内容

background-clip:content-box; 图像从内容（包括content）开始裁剪，表示裁剪超出内容区的内容

background-clip：text;文本剪裁(字体加背景)，见后续geng

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-clip</title>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        body{
            background-color: burlywood;
        }
        #Box{
            width: 1800px;
            height: 400px;
            background-color: gray;
            margin: 200PX auto;
        }
        div[class^="box"]{
            width: 344px;
            height: 296px;
            background-color: rgb(28, 68, 154);
            /* 使4个盒子的边框为15px */
            border: 15px dashed rgb(236, 20, 20);
            /* 使4个盒子显示在一行 */
            float: left;
            /* 设置每个盒子外边距10px */
            margin: 10px;
            /* 设置每个盒子内边距10px */
            padding: 20px;
            /* 每个盒子都设置背景，不平铺 */
            background-image: url(./flower.jpg) ;
            background-repeat:no-repeat;
        }
        
        .box2{
            background-clip: border-box;
        }
        .box3{
            
            background-clip: padding-box;
        }
        .box4{
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div id="Box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

三、background-origin与background-clip同时设置的比较

background-origin与background-clip比较1

background-origin	border-box
background-clip	border-box	padding-box	content-box

background-origin与background-clip比较1附代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-origin与backgroiund-clip的比较1</title>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        body{
            background-color: burlywood;
        }
        #Box{
            width: 1800px;
            height: 400px;
            background-color: gray;
            margin: 200PX auto;
        }
        div[class^="box"]{
            width: 344px;
            height: 296px;
            background-color: rgb(28, 68, 154);
            /* 使4个盒子的边框为15px */
            border: 15px dashed rgb(236, 20, 20);
            /* 使4个盒子显示在一行 */
            float: left;
            /* 设置每个盒子外边距10px */
            margin: 10px;
            /* 设置每个盒子内边距10px */
            padding: 20px;
            /* 每个盒子都设置背景，不平铺 */
            background-image: url(./flower.jpg) ;
            background-repeat:no-repeat;
        }
        
        .box2{
            background-origin:border-box;
            background-clip: border-box;
        }
        .box3{
            background-origin:border-box;
            background-clip: padding-box;
        }
        .box4{
            background-origin:border-box;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div id="Box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

background-origin与background-clip比较2

background-origin	padding-box
background-clip	border-box	padding-box	content-box

background-origin与background-clip比较2附代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-origin与background-clip比较2</title>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        body{
            background-color: burlywood;
        }
        #Box{
            width: 1800px;
            height: 400px;
            background-color: gray;
            margin: 200PX auto;
        }
        div[class^="box"]{
            width: 344px;
            height: 296px;
            background-color: rgb(28, 68, 154);
            /* 使4个盒子的边框为15px */
            border: 15px dashed rgb(236, 20, 20);
            /* 使4个盒子显示在一行 */
            float: left;
            /* 设置每个盒子外边距10px */
            margin: 10px;
            /* 设置每个盒子内边距10px */
            padding: 20px;
            /* 每个盒子都设置背景，不平铺 */
            background-image: url(./flower.jpg) ;
            background-repeat:no-repeat;
        }
        
        .box2{
            background-origin:padding-box;
            background-clip: border-box;
        }
        .box3{
            background-origin:padding-box;
            background-clip: padding-box;
        }
        .box4{
            background-origin:padding-box;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div id="Box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

background-origin与background-clip比较3

background-origin	content-box
background-clip	border-box	padding-box	content-box

background-origin与background-clip比较3附代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-origin与background-clip比较3</title>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        body{
            background-color: burlywood;
        }
        #Box{
            width: 1800px;
            height: 400px;
            background-color: gray;
            margin: 200PX auto;
        }
        div[class^="box"]{
            width: 344px;
            height: 296px;
            background-color: rgb(28, 68, 154);
            /* 使4个盒子的边框为15px */
            border: 15px dashed rgb(236, 20, 20);
            /* 使4个盒子显示在一行 */
            float: left;
            /* 设置每个盒子外边距10px */
            margin: 10px;
            /* 设置每个盒子内边距10px */
            padding: 20px;
            /* 每个盒子都设置背景，不平铺 */
            background-image: url(./flower.jpg) ;
            background-repeat:no-repeat;
        }
        
        .box2{
            background-origin:content-box;
            background-clip: border-box;
        }
        .box3{
            background-origin:content-box;
            background-clip: padding-box;
        }
        .box4{
            background-origin:content-box;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div id="Box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>