CSS学习（八）-background-origin、background-clip

最新推荐文章于 2024-06-19 09:37:17 发布

bwshqh

最新推荐文章于 2024-06-19 09:37:17 发布

阅读量966

点赞数

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

本文链接：https://blog.csdn.net/bwshqh/article/details/50814533

版权

css学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

一、理论：
1.css背景属性简介：
a.background-color 背景颜色
b.background-image 背景图片
c.background-repeat 铺放格式
d.background-attachment 固定或者滚动
e.background-position 设置背景图片位置
f.background-origin 指定绘制背景图片的起点
g.background-clip 指定背景图片的显示范围
h.background-size 指定背景图片的尺寸大小
i.background-break 指定内联元素的背景图片进行平铺时的循环方式
2.background-origin:
a.padding-box 决定background-position起始位置从padding的外边缘开始显示背景图片
b.border-box:决定background-position起始位置从外边缘开始显示背景图片
c.content-box:决定background-position起始位置从content的外边缘开始显示背景图片
d.content-box:决定background-position起始位置从content的外边缘开始显示背景图片
3.background-clip：
a.border-box 默认悠哉，元素边框之外的背景图片将被裁剪
b.padding-box:元素背景从padding区域向外裁减
c.content-box:元素背景从content区域之外的背景将被裁减

二、实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 200px;
            border: 20px dashed rgba(0,0,0,0.5);
            background: orchid url(images/border-background.gif) no-repeat left top;
            padding: 20px;
            margin: 30px;
        }
        .padding-box{
            -webkit-background-origin: padding-box;
            -moz-background-origin: padding-box;
            -o-background-origin: padding-box;
            -ms-background-origin: padding-box;
            background-origin: padding-box;
        }
        .padding-box1{
            -webkit-background-origin: border-box;
            -moz-background-origin:  border-box;
            -o-background-origin: border-box;
            -ms-background-origin:  border-box;
            background-origin:  border-box;
        }
        .padding-box2{
            -webkit-background-origin: content-box;
            -moz-background-origin:  content-box;
            -o-background-origin: content-box;
            -ms-background-origin:  content-box;
            background-origin:  content-box;
        }
    </style>
</head>
<body>
    <div >1</div>
    <div class="padding-box" >2</div>
    <div class="padding-box1" >3</div>
    <div class="padding-box2" >5</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 300px;
            height:600px;
            border:50px dash rgba(0,0,0,0.8);
            background: rgba(0,25,25,0.8) url(images/2-11-test.jpg) no-repeat;
            padding: 30px;
            margin: 20px;
        }
        .no-repeat{
            background-repeat: no-repeat;
        }
        .repeat{
            background-repeat: repeat;
        }
    </style>
</head>
<body>
    <div class = "no-repeat"></div>
    <div class="repeat"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 300px;
            height:300px;
            border:30px dashed rgba(25,25,125,0.5);
            background: url(images/2-11-test.jpg) no-repeat;
            margin: 20px;
            padding: 30px;
        }
        .border-box{
            -webkit-background-clip: border-box;
            -moz-background-clip: border-box;
            -o-background-clip:border-box;
            -ms-background-clip:border-box;
            background-clip: border-box;
        }
        .border-box{
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding-box;
            -o-background-clip:padding-box;
            -ms-background-clip:padding-box;
            background-clip: padding-box;
        }
        .content-box{
            -webkit-background-clip: content-box;
            -moz-background-clip: content-box;
            -o-background-clip:content-box;
            -ms-background-clip:content-box;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div class="border-box"></div>
    <div class="padding-box"></div>
    <div class="content-box"></div>
</body>
</html>

bwshqh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（八）-background-origin、background-clip

一、理论：1.css背景属性简介：a.background-color 背景颜色b.background-image 背景图片c.background-repeat 铺放格式d.background-attachment 固定或者滚动e.background-position 设置背景图片位置f.background-origin 指定绘制背景图片的起点g.back
复制链接

扫一扫

专栏目录