background-clip--背景是否填充

小白咚

于 2020-06-09 21:35:00 发布

阅读量26

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_44438307/article/details/133022966

本文深入探讨了CSS中背景属性的使用方法，包括background-color、background-image、background-repeat、background-clip和background-origin等属性，通过具体实例展示了如何设置背景颜色、背景图片、背景重复、背景裁剪和背景定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        /* border:dashed虚线 */
        background-color: black;
        border: dashed 15px green;
        padding: 30px;
        color: white;
        font-size: 30px;
        font-weight: bold;
        background-image: url("1.png");
        /* 背景不重复 */
        background-repeat: no-repeat;
    }
    .div1{
        /* 背景充满(包含边框和内边距) */
        background-clip: border-box;
        /* 图片从左上角边框绘制 */
        background-origin: border-box;
    }
    .div2{
        /* 不包含边框，包含内边距 */
        margin-top: 40px;
        background-clip: padding-box;
        /* 图片从左上角内边距开始绘制 */
        background-origin: padding-box;
    }
    .div3{
        /* 不包含边框和内边距 */
        margin-top: 40px;
        background-clip: content-box;
        /*  */
        background-origin: content-box;
    }
</style>
<body>
    <div class="div1">实例一</div>
    <div class="div2">实例二</div>
    <div class="div3">实例三</div>
</body>
</html>