CSS:background属性使用总结

• 1、background-color: 规定背景颜色。

• 2、background-image: 规定背景图片。

	background-image:url("Images/mytest.jpg");

里面的图片路径是相对于代码所在样式表相对路径。路径也可以不加双引号:

	background-image:url(Images/mytest.jpg);

• 3、background-repeat: 规定背景图片是否可以重复。

background-repeat: repeat; /* 默认值，在水平和垂直方向上同时重复背景图片*/
background-repeat: no-repeat; /* 不重复背景图片*/
background-repeat: repeat-x; /* 背景图片水平方向重复 */
background-repeat: repeat-y; /* 背景图片垂直方向重复*/
background-repeat: inherit; /* 继承父元素的background-repeat属性*/

• 4、background-position: 规定元素背景图片的位置。

除了上图中所说，还可以这样取值：

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

• 5、background-size: length|percentage|cover|contain;

cover表示背景图片等比例缩放覆盖整个元素背景，有可能会被裁切。
contain表示将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

background-size: length|percentage|cover|contain;

• 6、background-origin属性规定背景图片开始绘制的区域。

background-origin: padding-box;   /*  背景图像相对于内边距框来定位。  */
background-origin: border-box;    /*  背景图像相对于边框盒来定位。    */
background-origin: content-box;   /*  背景图像相对于内容框来定位。   */

• 7、background-clip属性规定背景图片允许绘制的区域。

background-clip: padding-box;   /*  默认值。背景绘制在边框方框内（剪切成边框方框）。  */
background-clip: border-box;    /*  背景绘制在衬距方框内（剪切成衬距方框）。    */
background-clip: content-box;   /*  背景绘制在内容方框内（剪切成内容方框）。   */
-webkit-background-clip: text;   /*  背景绘制在文字内（图片作为文字的背景，兼容性极差，仅在chrome浏览器中生效）。   */

<div class="divClass">
    生日快乐 
</div>
<style>
.divClass{
      width: 400px;
      height: 300px;
      font-size: 100px;
      text-align: center;
      border: 2px solid #000;
      color: transparent;//文字本身的背景色设为透明
      -webkit-background-clip:text;//图片在文字中绘制，也就是图片充当文字的背景色
      background-image: url('./img/2.jpg');
}
</style>