CSS背景

CSS背景

background-color 背景颜色

<p>我是p标签</p>
p{
    background-color: red;
}

background-image 背景图片

body{
    background-image: url('./demo.png');     /* url('')  引出图片 */
}

background-repeat 背景图重复

设置背景图片是否重复显示，和重复显示的方式。
取值：
repeat： 背景图像在横向和纵向平铺 。默认值。
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
no-repeat： 背景图像不平铺
round： 当背景图像没有足够的空间进行repeat时，背景图像会缩放到适应且填充满整个容器（CSS3）。
space： 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
说明：
设置或检索对象的背景图像如何铺排填充。必须先指定 <’ background-image ‘> 属性。
允许提供2个参数，如果提供2个参数，第1个用于横向，第二个用于纵向。
如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值。

background-position 背景图起始位置

设置背景图片的起始位置。

{
    background-position: 100% 5px       
}

取值：

： 用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小。

： 用长度值指定背景图像填充的位置。可以为负值。
center： 背景图像横向和纵向居中。
left： 背景图像在横向上填充从左边开始。
right： 背景图像在横向上填充从右边开始。
top： 背景图像在纵向上填充从顶部开始。
bottom： 背景图像在纵向上填充从底部开始。
说明：
设置或检索对象的背景图像位置。必须先指定 <’ background-image ‘> 属性。
该属性提供2个参数值（CSS3中已允许提供3，4个值）。
如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个值，该值将用于横坐标；纵坐标将默认为50%（即center）。
如果提供三或四个值，每个或偏移前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。 如下面的示例：
示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px
缩写方式：

background:url(test1.jpg) no-repeat right 20px bottom 20px;

你也可以设置3个参数值：
拆分方式：距离左边和底部各有10px

background:url(test1.jpg) no-repeat left bottom 10px;

要注意的是：设置3个或4个值，偏移量前必须有关键字。也就是说，形如：”10px bottom 20px” ，这样的参数设置是错误的，因为10px前面没有关键字。

background-attachment 背景图是否滚动

说明：
设置或检索背景图像是随对象内容滚动还是固定的。必须先指定 <’ background-image ‘> 属性。
取值：
scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 默认值。
fixed： 背景图像相对于窗体固定。
local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

background-size 背景图尺寸

background-size:100% 500px 设置背景图片的尺寸大小
取值：
用长度值、百分比指定背景图像大小。不允许负值。
auto： 背景图像的真实大小。
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。容器的宽和高中哪个尺寸大，就缩放到它的尺寸。如果宽和高的不相等，背景图像就会超出容器。
contain： 将背景图像的宽或高等比缩放到与容器的宽度或高度相等，容器的宽和高中哪个尺寸小，就缩放到它的尺寸。剩余的背景空间使用background-repeat填满背景空间。背景图像始终被包含在容器内，但重复的背景图片有一部分会超出容器。
注意：
该属性提供2个参数值 (特性值 auto cover和contain除外)。
如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。 对应的脚本特性为backgroundSize。

Background 连写方式

background：color url( ) no-repeat fixed center center / size ;
连写的时候需要注意顺序，还有如果background-position和background-size同时需要设置的话，background-position和background-size之间要用斜杠进行分隔。如果你要设置background-size就必须先要设置background-position，因为连写的顺序是position再到size的。如果你要设置position，那么size设不设置无所谓，看需求。

background-origin

定义：background-origin 属性规定了background-position 属性在哪里开始计算定位。

注释：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。
值 描述
padding-box 默认值。背景图像相对于内边距框来定位。（Padding开始计算）
border-box 背景图像相对于边框盒来定位。（border开始计算）
content-box 背景图像相对于内容框来定位。（content开始计算）

background-clip 规定了背景的绘制区域。

值 描述
border-box 默认值。裁剪边框以外的背景内容。背景区域是边框及边框以内的内容
padding-box 被裁内边距以外的背景内容。背景区域是内边距及内边距以内的内容
content-box 被裁内容以外的背景内容。背景区域只有内容区域

背景半透明

1.强烈推荐：盒子背景半透明 background: rgba(r , g , b, alpha);
r,g,b 是红绿蓝的颜色， alpha 是透明度的意思，取值范围是 0~1 之间。 这个是让盒子的背景半透明，盒子里面内容不半透明。
2.opacity：; 元素半透明
此属性是盒子半透明，不是背景半透明哦，因为他里面的内容也一起半透明了。
opacity取值范围是 0~1 之间 表示透明度 0% 到 100%，一般会取值 opacity:0.5;
ie8及其以下的版本 不支持opacity，要用filter:Alpha(opacity=50) 来代表opacity:0.5; 他们效果是一样的，只是低版本兼容性问题造成的而已。filter:Alpha(opacity=50) 的取值是 0 到 100
因此，低版本的 ie浏览器，我们不需要透明了，直接采用优雅降级的做法。
background: gray; （先写）
background: rgba(0,0,0,.2); （后写）
以上两句 背景， 低版本ie只执行gray， 其他浏览器执行 半透明下面这一句。

× 请我吃糖~