css背景有关的属性详细介绍

来源：懂视网责编：小采时间：2020-11-27 18:52:25

css背景有关的属性详细介绍

css背景有关的属性详细介绍:印象中css控制背景的就一个background，但是background是一个复合属性它包括：background-color：背景颜色，css支持的颜色表示方法，都可以用background-image：背景图片（url）background-repeat：背景是否重复（repeat、no-repeat

推荐度：

点击下载本文 文档为doc格式

导读css背景有关的属性详细介绍:印象中css控制背景的就一个background，但是background是一个复合属性它包括：background-color：背景颜色，css支持的颜色表示方法，都可以用background-image：背景图片（url）background-repeat：背景是否重复（repeat、no-repeat

印象中css控制背景的就一个background，但是background是一个复合属性

它包括：

background-color：背景颜色，css支持的颜色表示方法，都可以用

background-image：背景图片（url）

background-repeat：背景是否重复（repeat、no-repeat、repeat-x、repeat-y）

background-position：背景定位（关键字、百分比、像素）

background-size：背景大小

background-origin：背景的定位区域

background-clip：背景绘制区域

background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动

除了这些，多背景、渐变、遮罩，我也把他们归到背景里吧。

一个个看看吧-0-。

开头说了，我很长时间都以为背景就是background这一个单词的玩意。因为我总是写成：

 .p{
 background: #000 url("1.jpg") no-repeat left center;/*颜色、图片、是否平铺、定位*/
 }

不知道大家是不是也像我这样写啊。很简单吧，背景颜色、背景图片、是否重复、定位4个属性连着写。

下面说其他属性

背景的定位区域（background-origin）：值是关键字，有3个

.div{
 width: 400px;
 height: 200px;
 padding: 20px;
 border:10px solid rgba(255,255,255,.2);
 background: #000 url("1.jpg") no-repeat;
 background-origin:border-box;
 /*background-origin:padding-box;*/
 /*background-origin:content-box;*/
 }

border-box css背景有关的属性详细介绍