css背景之background属性的用法笔记

原创 PHP笔记  2017-03-22 17:45  阅读 1,012 views 次

css背景(background)属性用于设置html元素的背景,这个属性可以接受任何合法的颜色值。

css背景属性

  • background-color:设置元素的背景颜色。
  • background-image:把图片设置为背景。
  • background-repeat:设置背景图片是否及如何重复。
  • background-attachment:背景图像是否固定或者随着页面的其余部分滚动。
  • background-position:设置背景图像的起始位置。
  • background:简写css属性,将以上属性的属性值写在该属性中。

1、background-color属性

background-color属性用来定义元素的背景颜色。

格式:

选择器{
background-colo:颜色值/颜色名;
}

2、background-image属性

background-image属性定义了元素的背景图片。在默认的情况下,背景图片是平铺重复显示的,覆盖整个css选择器选择的元素。

格式:

选择器{
background-image:url('背景图片的地址');
}

3、background-repeat属性

background-repeat属性是用来设置背景图片平铺方式(水平平铺\垂直平铺\不平铺)。

格式:

选择器{
background-repeat:repeat-x; /*水平平铺*/
background-repeat:repeat-y; /*垂直平铺*/
background-repeat:no-repeat; /*不平铺*/
}

4、background-attachment属性

background-attachment属性是用来指明背景图的位置是固定于视口的,还是随着包含块移动的。

5、background-position 属性

background-position属性是用来改变背景图片在背景中的位置的。

背景属性简写

背景一般是有多个背景属性来控制的,为了简化属性代码,我们可以将这些属性合并在同一个属性中("background)。

格式:

选择器{
background:颜色值/颜色名 url('背景图片地址') 重复方式 是否固定 位置;
}

说明:background属性的属性值是有顺序的(background-color-->background-image-->background-repeat-->background-attachment-->background-position),属性可以不全部使用,你可以根据实际情况选择使用。

本文地址:https://www.ggbiji.com/css-background.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情