CSS3属性总结之background

学习css3的一些新属性，就把一些使用中遇到的方法和问题做一个小结。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

background-color

背景颜色在IE7之前只显示到padding区域，不包含border。而现代浏览器background-color都是从border的左上角，到border的右下角。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

background-color: rgba(0,255,0,0.5);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

background-image

背景图图有几种情况：默认情况下（repeat），会从border区域开始布满，当然也包含了border区域；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

当设置为no-repeat时，是从padding的左上角到border的右下角；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

背景图图应用：

logo中添加用于SEO的文字

html结构是：h1>a，a中的文字用于搜索，再讲a转块，转块之后就可以设置宽高，这样就可以看到后面加的背景图图了，宽高就等于背景图图的宽高，但是搜索的文字会覆盖在背景图上，使用text-indent给a一个-999px的值让文字出去很远很远的位置，再给a一个overflow：hidden就可以把文字切掉了。当然，也可以将文字的font-size设为0，但是在IE6、7下会出现不兼容问题，有一小条文字在图图上，so用text-indent就好了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

padding区域挤出用来放背景图

这种方法加图图，通常是这个图图并不重要，主要用于修饰的时候，重点在文字部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

为什么要加在padding呢？当想放一张图图在盒子中，通常是在no-repeat情况下，那么no-repeat时图图可以到padding区域，但是width是用来写文字的，so就只能加在了padding，具体加在top还是left看具体情况而定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

注意：要设置背景图，那么盒子必须要有一个宽高，如果是行内那就先转块，如果是浮动的那就先清除浮动（清除浮动方法再另外总结）。

在CSS3中可以重复填写url()实现多背景，既可以这样写

background-image: url(), url();
background-position: right bottom, left top;

还可以写成综合样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

background: url() right bottom, url() left top;

新属性： background-clip

可以控制背景图图和背景颜色的绘制范围。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

      ：content-box，此时color和image只出现在内容区域（width），不会扩展到padding，更加到不了border了；
    
      ：padding-box，此时color和image只出现到padding区域，在padding以内绘制；

      ：border-box，看名字就知道可以绘制到border了。

background-clip应用举例：

在导航栏中，鼠标经过时不看到切换状态的变化，同时在视觉上分隔每个li的链接，使用padding-box声明，让背景色只到padding，然后给border设置为transparent（为了显示后面的其他实色）也可以设置颜色给border，这样后面的页面透过边框可见。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

.multi_drop_menu li a {  
    display:block;
    border-right-style:solid;
    Background-clip:padding-box;
    Text-decoration:none;
    Color:#555;
    Background-color:#eee;
    Border-width:3px;
    Border-color:transparent;
}

插播一个background-origin：属性值和background-clip一样有三个，分别表示背景图的原点在content、padding和border区域。

background-position

默认情况下是left top；居左上对齐，此时如果是no-repeat图图就只在左上位置，如果是repeat那会以左上顶点为原点向各个方向重复展开；通过设置位置来居左、中、右对齐，center center是以中心为原点，如果no-repeat那么图图就居中，repeat就会以最中心的图图为原点向各个方向展开来。 特殊情况是当背景图片的size大于盒子的边界，还是可以设置对齐位置，但是此时image不论是否设置了no-repeat都会扩展到border下面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

• 应用在body或盒子的大背景，position：center top；
• banner通栏，width：100%； position：center top；

像素表示法：两个属性值都是用px为单位的数值表示。

• 第一个值：数值是几，表示图片的左上角距离border以内的左上角，水平位移多少距离。
• 第二个值：数值是几，表示图片的左上角距离border以内的左上角，垂直位移多少距离。

像素表示法的两个属性值区分正负，正负值表示移动的方向不同。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

• 正数：图片的左上角相对于盒子border以内的左上顶点，向右、向下移动。
• 负数：图片的左上角相对于盒子border以内的左上顶点，向左、向上移动。

像素定为法可以应用在sprite图图找图上，所以，怎么摆放精灵图就是一件要提前算计好的了，如果盒子在页面左边，那在sprite里面放在右边，这样右边宽一些也不会有其他图图出现，相反盒子在页面右边就放在sprite的左侧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

还有一种百分比的表示方法，

• 0% 0%相当于left top；50% 50%相当于center center；
• 100% 100%相当于将图图右下角对齐到了border内侧的右下角。一种简单的计算方法就是找出100% 100%对应的像素值，其他值再按照百分比计算出像素值再去定位，100%=盒子width + paddind - 图图width

注意: 修改background属性时，使用单一属性层叠，若使用综合属性则其他属性不变，只改变需要修改的，在使用综合属性时，要特别注意position后面两个值得顺序！

background-attachment ：

scroll
fixed

设置背景图是否随着页面滚动而滚走，默认scroll随着盒子滚动跟着走，fixed不随着滚，永远固定在浏览器窗口的某个位置，注意在小盒子内部使用fixed定位之后，参考点将从border的内左上点，变成浏览器窗口的左上顶点，，此时上面框里面的背景图相对于browser的左上顶点定位，页面滚动他也不后跟着滚，如果第一个box滚上去出了页面，那么图图也将被其他盒子挡住了，因为背景图就是在盒子下层在背景色上层的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

新属性：background-image 背景图渐变

渐变分两种，linear-gradient （线性渐变）和 radial-gradient （放射性渐变，从一点向四周发散）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

• background：linear-gradient（red，blue）； 背景颜色从红色到蓝色的渐变；
• background：linear-gradient（to right，red，blue）； 背景颜色从红色到蓝色的渐变；
• background：linear-gradient（-45deg，red，blue）； 背景颜色把起点从默认的中上设定到了左上。

比如淘宝搜索框的渐变色：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

.search ul li.active a{
            background: linear-gradient(to right, #FF8F00, #FF5300);
            color: #fff;
            font-weight: bold;
            border-radius: 5px 5px 0 0;
        }

新属性：background-size

背景尺寸是CSS3规定的属性，用来控制背景图图的size：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html

• 50%：缩放图图，让图图填充背景区的一半；
• 100px 50px; 把图图调整到固定的宽高；
• cover；拉大图片，让图图完全填满背景区，保持宽高比；等价于background-size: 100% auto;
• contain；缩放图图，让图图恰好适合背景区，保持宽高比。等价于background-size: auto 100%;

注意不要把图图拉的太大，会造成失真！

应用举例：在精灵图中想要放大或者缩小其中某一个图

将容纳背景图的盒子的宽高相应的x2，同时，背景定位的位置值x2，背景size也同时x2，即可实现精灵图中选中的图放大两倍效果。 如果只是直接应用backg-size只会改变背景图也就是整张精灵图的size。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3563.html