CSS不常用属性---Tips2背景

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

1. scroll 默认值 背景固定在元素上，不会随着内容一起滚动

2. fixed 背景固定在视窗上，内容滚动时背景不动

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

background-origin

设置背景起始位置

1. content-box 在内容盒子内部绘制背景

2. border-box 在元素盒子内部绘制背景

3. padding-box 在内边距盒子内部绘制背景

    Title        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;        }

background-clip

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

1. content-box 在内容盒子内部裁剪背景

2. border-box 在元素盒子内部裁剪背景

3. padding-box 在内边距盒子内部裁剪背景

    Title        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;        }

关键字：css, html, 盒子, 背景

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！