贤话师兄
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>知识整理>正文

网页背景属性

若等贤 2018-02-25 21:14 前端网页背景

背景:可以是单一颜色或图片填充元素
1.背景色

属性:background-color
取值:合法的颜色值
注意:背景颜色默认是从边框的位置处开始填充的

2.背景图片

属性:background-image
取值:url(图片的路径);
ex:background-image:url(a.jpg);

3.背景图片平铺

属性:background-repeat
取值:
   repeat 默认值,横向纵向都平铺
   no-repeat 不平铺(图片只显示一次)
   repeat-x 只在水平方向平铺
   repeat-y 只在垂直方向平铺

4.背景图片尺寸

属性:background-size
取值:
   1.width/height  (ex:200px 300px)
   2.width%/height%  (ex:50% 50% 是元素自己的高宽占比)
   3.cover
     将背景图等比放大,直到背景图完全覆盖到元素的所有区域为止。
   4.contain
     将背景图等比放大,直到背景图碰到元素的某一个边缘为止

5.背景图片固定

作用:将背景图固定在网页的某个位置处,一直在可视区域中,不会随着滚动条而发生位置的变化。
属性:background-attachment
取值:
   1.scroll 默认值,滚动
   2.fixed 固定

6.背景图片定位

作用:改变背景图在元素中的位置
属性:background-position
取值:
   1.x y  具体的数值(px)
     x:
   背景图水平偏移距离
   取值为正,向右移动
   取值为负,向左移动
 y:
   背景图垂直偏移距离
   取值为正,向下移动
   取值为负,向上移动
   2.x% y%
     0% 0% 背景图在左上角
 100% 100% 背景图在右下角
 50% 50% 背景图在中间位置
   3.关键字
 x:left/center/right
 y:top/center/bottom
 ex:background-position:right top;
 
  

7.背景简写属性

在一个属性中指定背景的多个属性值
属性:background
取值:color url() repeat attachment position
ex:
  background:gray url(a.jpg);
注意:
  如果不设置其中某个属性值的话,该位置采用默认值。

本文链接:https://blog.weguiding.com/web/bj_264.html