HTML+CSS之background

第一个专题——background属性


今天写一下background属性,具体如下:

1.background-color:默认值:transparent,这是我们在做网页时,经常使用的属性,较为简单。对应的脚本属性:backgroundColor
2.background-image:使用url("本地图片地址") 对应的脚本属性:backgroundImage
3.background-repeat:
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向上平铺
repeat: 背景图像在横向和纵向平铺
no-repeat: 背景图像不平铺
round: 背景图像自动缩放直到适应且填充满整个容器。(CSS3)
space: 背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)
4.background-attachment: fixed | scroll | local
fixed: 背景图像相对于窗体固定。
scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local: 背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)
5.background-position:
position:[ left | center | right | top | bottom | percentage | length ] | [ left | center | right |percentage | length ] [ top | center | bottom | percentage| length ] | [ center | [ left | right ] [ percentage | length ]? ] && [ center | [ top | bottom ]
percentage: 用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小
length: 用长度值指定背景图像填充的位置。可以为负值。
center: 背景图像横向和纵向居中。
left: 背景图像在横向上填充从左边开始。
right: 背景图像在横向上填充从右边开始。
top: 背景图像在纵向上填充从顶部开始。
bottom: 背景图像在纵向上填充从底部开始
6.background-size:
bg-size = [ length | percentage | auto ]{1,2} | cover | contain
length: 用长度值指定背景图像大小。不允许负值。
percentage: 用百分比指定背景图像大小。不允许负值。
auto: 背景图像的真实大小。
cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

其实呢,还有两个属性,但是在平时很少用到,为了避免混淆,用的时候直接查文档就行了。

猜你喜欢

转载自www.cnblogs.com/JameSLW-LEO/p/9549297.html