[Java小工匠]CSS背景1-概述

Java小工匠

发布于 2018-08-10 03:59:40

62200

代码可运行

文章被收录于专栏：小工匠技术圈小工匠技术圈

运行总次数：0

代码可运行

1、属性说明

1.1、background-image

background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

值	说明
url(URL地址)	指向图像的路径。
none	默认值。不显示背景图像。
inherit	规定应该从父元素继承 background-image 属性的设置。

1.2、background-position

值	说明
left topleft centerleft bottomcenter topcenter centercenter bottomright topright centerright bottom	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：left top。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

1.3、background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位。

值	说明
padding-box	背景图像相对于内边距框来定位。（默认）
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

1.4、background-repeat

background-repeat 属性设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承。

1.5、background-size

background-size 属性规定背景图像的尺寸。

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-size : 100% 100% 与 cover  和 contain  区别。
100% 100%  图片宽度和高度的比例会被改变，填满盒子。
cover     图片宽度和高度比例不变，填满盒子，超出部分会被裁剪。
contain  图片宽度和高度比例不变，容器内至少有一张完整的图，容器留白区，铺不下的再裁掉。

1.6 background-clip

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

值	说明
border-box	背景被裁剪到边框盒。（默认）
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容距框。

1.7 background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动。

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。