码迷,mamicode.com
首页 > Web开发 > 详细

详解css:background

时间:2019-01-03 12:58:23      阅读:295      评论:0      收藏:0      [点我收藏+]

标签:focus   font   定义   背景   bsp   and   容器   size   url   

连写:

background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:

background:背景颜色 背景图片地址 参考点 背景平铺 背景滚动 背景位置/尺寸

background:rgba()  url()  content-box repeat-x fixed  20% 20%/100px 20px 

background-clip:content-box;(背景裁剪单独写)

具体介绍:

1)background-color  定义背景的颜色以及透明度  背景颜色始终填充到border以内的所有区域内(见下面的图),不受background-origin影响,后者只决定

  background-image的参考原点!默认值:transparent(透明的) 改变透明度的写法: rgba(255,255,0,0.5)

2)background-image:url()  定义背景图片的地址

3)background-origin  定义背景图片的开始显示的参考原点  默认值:padding-box

  padding-box:从padding区域(含padding)开始显示背景图像。
  border-box:从border区域(含border)开始显示背景图像。
  content-box:从content区域开始显示背景图像。 
技术分享图片
                                                                background-origin:content-box                                                       
技术分享图片
                   background-origin:padding-box(默认参考)
        技术分享图片
                       background-origin:border-box                                   
 
4)background-repeat   定义背景图填充方式 默认repeat

    取值:

  repeat-x:背景图像在横向上平铺
  repeat-y:背景图像在纵向上平铺
  repeat:背景图像在横向和纵向平铺
  no-repeat:背景图像不平铺
  round:背景图像自动缩放直到适应且填充满整个容器。(CSS3)
  space:背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3) 
5)background-attachment :fixed(默认) || scroll || local
  fixed:背景图像相对于窗体固定。
  scroll:背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
  local:背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)
6)background-position 相对于background-origin定义的参考区域来定位的!!与盒子的类型(box-sizing)无关   ;详见上一篇随笔
7) background-size 默认值auto
  <length>:用长度值指定背景图像大小。不允许负值。
  <percentage>:用百分比指定背景图像大小。不允许负值。
  auto:背景图像的真实大小。
  cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
  contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。 
8) background-clip   定义裁剪背景图的区域
  padding-box:从padding区域(不含padding)开始向外裁剪背景。
  border-box:从border区域(不含border)开始向外裁剪背景。
  content-box:从content区域开始向外裁剪背景。
  text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果

详解css:background

标签:focus   font   定义   背景   bsp   and   容器   size   url   

原文地址:https://www.cnblogs.com/cui-ting/p/10213486.html

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