background-clip、background-origin属性及彩虹字体的实现

@小玉同学

已于 2022-05-11 00:00:40 修改

阅读量389

点赞数

分类专栏： HTML、CSS 文章标签： css css3 html

于 2022-05-08 15:53:51 首次发布

本文链接：https://blog.csdn.net/weixin_51445423/article/details/124649254

版权

HTML、CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

background-clip属性
background-origin属性

background-clip属性

background-clip （背景裁剪）设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。
background-clip: text;-webkit-background-clip: text;color: transparent;	以文字的范围来裁剪背景图片

border-box

背景延伸至边框外沿（但是在边框下层）

    <style>
        .div1{
            width: 346px;
            height: 346px;
            padding: 10px;
            background-color: rgb(0, 255, 255);
            background-clip: border-box;
            border: 10px dashed rgb(78, 164, 80);
        }
        
    </style>
</head>
<body>
    <div class="div1">
        <img src="./src/assets/hmbb.png" alt="">
    </div>
</body>

在这里插入图片描述

content-box

背景绘制在内容方框内（剪切成内容方框）

    <style>
        .div1{
            width: 346px;
            height: 346px;
            padding: 10px;
            background-color: rgb(0, 255, 255);
            background-clip: content-box;
            border: 10px dashed rgb(78, 164, 80);
        }
        
    </style>
</head>
<body>
    <div class="div1">
        <img src="./src/assets/hmbb.png" alt="">
    </div>
</body>

在这里插入图片描述

padding-box

背景绘制在衬距方框内（剪切成衬距方框）

    <style>
        .div1{
            width: 346px;
            height: 346px;
            padding: 10px;
            background-color: rgb(0, 255, 255);
            background-clip: padding-box;
            border: 10px dashed rgb(78, 164, 80);
        }
    </style>
</head>
<body>
    <div class="div1">
        <img src="./src/assets/hmbb.png" alt="">
    </div>
</body>

在这里插入图片描述

background-clip: text;

以文字的范围来裁剪背景图片

    <style>
        p{
            color: transparent;
            /* 适配内核为webkit的浏览器（Google） */
            -webkit-background-clip: text;
            background-clip: text;
            line-height: 30px;
            background-image: url(./src/assets/hmbb.png);
        }
    </style>
</head>
<body>
    <p>这是一段以文字的范围来裁剪背景图片</p>
</body>

在这里插入图片描述

以线性渐变实现彩虹字体

    <style>
        p{
            color: transparent;
            /* 适配内核为webkit的浏览器（Google） */
            -webkit-background-clip: text;
            background-clip: text;
            line-height: 30px;
            background-image: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
        }
    </style>
</head>
<body>
    <p>这是一段用线性渐变实现的彩虹字体哦</p>
</body>