CSS background 属性

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cristina_song/article/details/83108148

规定背景图像的尺寸：

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

background-color
background-image 规定要使用的背景图像
background-repeat 规定如何重复背景图像
background-origin 规定背景图片的定位区域
background-position 规定背景图像的位置
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

background-size 规定背景图片的尺寸，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

• background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
• background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
• background-size:10%;/*
  0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候将其作为图片宽度来等比缩放 */
• background-size:cover;/* 将背景图片等比缩放填满整个容器 */
• background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

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

inherit 规定应该从父元素继承 background 属性的设置
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。