CSS---Tips2背景

最新推荐文章于 2022-04-03 18:30:00 发布

canglingyue

最新推荐文章于 2022-04-03 18:30:00 发布

阅读量382

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/canglingyue/article/details/51862072

版权

html+css 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

background

div{
    background: red url(img.png) no-repeat scroll left top/100% border-box content-box;
}

对应的属性全称

[background-color]

[background-image]

[background-repeat]

[background-attachment]

[background-position]/[background-size]

[background-origin]

[background-clip]

background-attachment

scroll 默认值背景固定在元素上，不会随着内容一起滚动
fixed 背景固定在视窗上，内容滚动时背景不动

body {
    background-image: url(11.jpg); 
    background-attachment: fixed;
}

background-origin

设置背景起始位置

content-box 在内容盒子内部绘制背景
border-box 在元素盒子内部绘制背景
padding-box 在内边距盒子内部绘制背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            float: left;
            border: 10px dashed red;
            padding: 20px;
            margin: 20px;
            background-image: url(../img/11.jpg);
            background-repeat: no-repeat;
        }
        .div1{
            background-origin: content-box;
        }
        .div2{
            background-origin: border-box;
        }
        .div3{
            background-origin: padding-box;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

结果图

background-clip

在内边距盒子内部裁剪背景。

content-box 在内容盒子内部裁剪背景
border-box 在元素盒子内部裁剪背景
padding-box 在内边距盒子内部裁剪背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            float: left;
            border: 10px dashed red;
            padding: 20px;
            margin: 20px;
            background-image: url(../img/11.jpg);
            background-repeat: no-repeat;
        }
        .div1{
            background-clip: content-box;
        }
        .div2{
            background-clip: border-box;
        }
        .div3{
            background-clip: padding-box;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>