码迷,mamicode.com
首页 > 其他好文 > 详细

background

时间:2018-01-10 13:56:23      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:位置   position   ack   col   padding   区域   class   attach   parent   

1、background-color

  (1)、设置元素的背景色,所有的元素都可以设置背景色,包括 em a 之类的标签
  (2)、默认值:transparent,意思就是透明。这样才可以看到祖先元素的背景
  (3)、可能的值:颜色名字/十六进制的颜色/rgb代码颜色
  (4)、任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

2、background-image

  (1)、默认值:none
  (2)、语法:url("相对路径")
  (3)、任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
  (4)、所有的元素都可以设置背景

3、background-repeat 

  (1)、属性值 repeat 导致图像在水平和垂直方向上都进行平铺,这个属性就是设置怎么平铺
  (2)、值:  repeat-y(垂直方向平铺)
         repest-x(水平方向上平铺)
         no-repeat 水平和垂直方向上都不平铺

 

4、background-attachment

  (1)、设置背景图像是否固定或者随着页面的其余部分滚动
  (2)、值: scroll(默认值,页面会随着其余部分的滚动而滚动)
        fixed 当页面的其余部分滚动时,背景图像不会移动
        inherit(可继承性,但是IE8及以下浏览器都不支持)

5、background-position

  (1)、可以利用这个属性改变图片在背景中的位置(把图片放在一张大图上,通过这个属性可以减少图片的加载,优化性能)
  (2)、这个的先决条件就是要有一个 background-image
  (3)、语法:background-position:关键字/百分数值/长度值
  (4)、所有的值都是相对于容器元素的左上角的

6、background-size(CSS3新增的属性)

  (1)、Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
  (2)、值: auto(默认值,图片有多大就显示多大)
        contain(把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域)
        cover(把背景图像扩展至足够大,以使背景图像完全覆盖背景区域)
        100px 200px(把宽高写死,如果只写一个第二个值为默认)
        10% 10%(以包容元素的百分比来设置背景图像的宽度和高度,如果只有一个第二个auto)

7、background-origin(CSS3新增属性)

  (1)、规定 background-position 属性相对于什么位置来定位。

  (2)、值:padding-box    背景图像相对于内边距在定位,是默认值

       border-box      背景图像相对于边框来定位。

       content-box     背景图像相对于内容框来定位。

8、background-clip (CSS3新增属性)

  (1)、规定背景的绘制区域,也就是规定在哪些部位显示背景

  (2)、值:padding-box      

       border-box      默认值

       content-box     

  

background

标签:位置   position   ack   col   padding   区域   class   attach   parent   

原文地址:https://www.cnblogs.com/lan1974/p/8257853.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!