CSS3属性背景总结

为了学习CSS3的一些新属性，我对使用中的一些方法和问题做一个总结。

background-color

在IE7之前，背景色只显示在padding区域，不包含边框。现代浏览器的背景色是从边框的左上角到边框的右下角。

background-color: rgba(0,255,0,0.5);

background-image

背景图片有不同的情况：默认（重复），从边框区域填充，从Course填充包含“边境地区；

如果设置为no-repeat，则会从padding的左上角到border的右下角；

背景图片应用：

在徽标中添加SEO文字

HTML结构为：h1>a。和 中的文本用于搜索。我们来谈谈制作一个块。旋转块后，您可以设置宽度和高度，以便稍后可以看到背景图像。宽度和高度等于背景图像。图片的宽度和高度，但搜索到的文字覆盖了背景图片。使用text-indent给一个值-999px，让文本拉得很远，然后输入一个overflow:hidden来截断文本。 。当然，你也可以将文字的字体大小设置为0，但是在IE6和7下存在不兼容的问题。如果照片上有一小条文字，就使用text-indent即可。

填充区域被挤压以放置背景图像

这种添加图像的方法通常并不重要。主要用于装饰，以文字为主。

为什么要添加填充？如果你想在盒子里放一张图片，通常是不重复的情况，那么图片可以进入padding区域并重复，但是宽度是用来写文字的，所以它只适合padding。是加在顶部还是左边，根据具体情况而定。

注意：要设置背景图像，框必须有宽度和高度。如果是内联的，则先转动块。如果浮动，先清除浮动（清除浮动方法，单独求和）。

在CSS3中，可以重复填写URL()来实现不同的背景。既可以这样写

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

，也可以写成综合风格：

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

新增属性：Background-Clip

可以控制背景图片和背景颜色。绘图区。

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

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

背景剪辑应用示例：

在导航栏中，鼠标经过时不会看到开关状态的变化。同时，你会在视觉上将每个Li的链接分开。使用padding-box语句使背景颜色只到达padding，然后将边框设置为透明（以显示其后面的其他纯色）。您还可以设置边框颜色，以便通过边框可以看到下一页。

.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一样有3个属性值，表示背景图片的原点在content、padding、border区域。

background-position

默认在左上角；与左上角对齐。如果不重复的话，就只会在左上角的位置。重复时，以左上角顶点为原点，向各个方向一次又一次地扩展。 ;通过设置位置左对齐、居中对齐、右对齐。中心以中心为原点。如果不重复，图像会居中，重复会以中心图像为原点，向各个方向扩展。特殊情况是，如果背景图片的尺寸大于盒子的边框，仍然可以设置对齐位置，但此时无论是否设置不重复，图片都会扩展到边框以下。

• 涂抹于身体或胸部的背景，位置：上方中央；
• 横幅，宽度：100%；位置：中上；

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

• 第一个值：值是多少？表示图像左上角到边框内左上角的水平位移距离。
• 第二个值：值是多少？表示图像左上角到边框内左上角的垂直位移距离。

像素表示的两个属性值区分正值和负值，正值和负值表示不同的运动方向。

• 正数：图像左上角相对于框边框左上顶点向右下移动。
• 负数：图像的左上角相对于框边框的左上顶点向左上方移动。

像素设置方法可以应用于精灵图像搜索。因此，必须提前计算好如何放置精灵图像。如果盒子在页面的左侧，那么就把它放在精灵中的右侧，这样右侧就更宽了，就不会出现其他图像了。相反，该框放置在页面的右侧和精灵的左侧。

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

• 0% 0%对应左上角； 50% 50%对应中心center；
• 100% 100% 相当于将图像的右下角对齐到右下角边框的内侧。一种简单的计算方法是找到等于100%100%的像素值，然后根据其他值的百分比计算像素值，然后定位。 100%=盒子宽度+帕丁德-芭蕾舞宽度

注：更改背景属性如果使用单一属性级联，如果使用综合属性，其他属性保持不变，只更改需要更改的属性改变了。使用综合属性时，要特别注意两个值按位置的顺序！ ？在框中使用固定定位后，参考点从边框的内部左上点变为浏览器窗口的左上顶点。此时，上方框中的背景图片是相对于浏览器左上角定位的，并且不会跟随页面滚动。滚动，当第一个框在页面上下滚动时，图像也会被其他框遮挡，因为背景图像在框下方，背景色上方。

新属性：背景图片背景图片渐变

渐变有两种类型，线性渐变（线性渐变）和径向渐变（径向渐变，从一个点向各个方向发散）。

• 背景：线性渐变（红、蓝）；背景颜色从红到蓝渐变；
• 背景：线性渐变（向右、红色、蓝色）；背景颜色从红到蓝渐变；
• 背景：线性渐变（-45deg，红，蓝）；背景颜色设置从默认顶部中心到左上角的起点。

例如淘宝搜索框的渐变色：

.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

background-size是CSS3指定的属性，用于控制背景图片的大小： ❀ 50%：缩放图像，让图图占满背景的一半；

注意图片不要太大，否则会导致变形！

应用示例：如果要放大或缩小精灵图像中的某个图像

盒子的宽度和高度与背景图像匹配x2。同时，背景定位的位置值将是x2，背景尺寸也将是x2。您可以在精灵贴图中实现所选图像大小两倍的效果。如果直接应用 backg-size ，它只会改变背景图像，即整个精灵图像的大小。