background 背景类八大属性

    • 背景颜色(当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上)
    • background-image:背景图像
    • background-repeat:背景图像如何铺排填充 
      • repeat-x: 背景图像在横向上平铺
      • repeat-y: 背景图像在纵向上平铺
      • repeat: 背景图像在横向和纵向平铺
      • no-repeat: 背景图像不平铺
    • background-attachment :设置或检索背景图像是随对象内容滚动还是固定的 
      • fixed: 背景图像相对于窗体固定。 
        scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
    • background-position:设置或检索对象的背景图像位置 
      • <percentage>: 用百分比指定背景图像填充的位置。可以为负值。
      • <length>: 用长度值指定背景图像填充的位置。可以为负值。
      • center: 背景图像横向和纵向居中。
      • left: 背景图像在横向上填充从左边开始。
      • right: 背景图像在横向上填充从右边开始。
      • top: 背景图像在纵向上填充从顶部开始。
      • bottom: 背景图像在纵向上填充从底部开始。
      • 如果提供四个,每个或偏移前都必须跟着一个关键字(即left | center | right | top | bottom),偏移量相对关键字位置进行偏移。 
        示例:假设要定义背景图像在容器中右下方,并且距离右边和底部各有20px 
        缩写方式: background:url(test1.jpg) no-repeat right 20px bottom 20px;
      • 如果提供三个: 拆分方式: background:url(test1.jpg) no-repeat left bottom 10px; 
        要注意的是:设置3个或4个值,偏移量前必须有关键字。也就是说,形如:”10px bottom 20px” ,这样的参数设置是错误的,因为10px前面没有关键字。
      • 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
      • 如果只提供一个,该值将用于横坐标;纵坐标将默认为50%(即center)
    • background-origin:设置或检索对象的背景图像计算 <’ background-position ‘> 时的参考原点(位置) 
      • padding-box: 从padding区域(含padding)开始显示背景图像。
      • border-box: 从border区域(含border)开始显示背景图像。
      • content-box: 从content区域开始显示背景图像。
    • background-clip:指定对象的背景图像向外裁剪的区域 
      • padding-box: 从padding区域(不含padding)开始向外裁剪背景。
      • border-box: 从border区域(不含border)开始向外裁剪背景。
      • content-box: 从content区域开始向外裁剪背景。
      • text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果
    • background-size: 检索或设置对象的背景图像的尺寸大小 
      • <length>: 用长度值指定背景图像大小。不允许负值。
      • <percentage>: 用百分比指定背景图像大小。不允许负值。
      • auto: 背景图像的真实大小。
      • cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
      • contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
      • 如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。
      • 如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放

background 背景类八大属性的更多相关文章

  1. 前端之CSS列表及背景类属性

    一.列表类属性: 1.列表符号样式: list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式); 2. ...

  2. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  3. css详解background八大属性及其含义

    background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...

  4. css3新增属性-background背景

    css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...

  5. 【C#/WPF】Button按钮动态设置Background背景颜色

    学习笔记: 在XAML中给Button设置颜色大家都懂的,本篇只是记录用C#代码动态生成的按钮设置Background背景颜色. new一个Button,设置Background时可看到该属性类型是S ...

  6. PyQt(Python+Qt)入门:Designer组件属性编辑界面中QWidget类相关属性详解

    本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...

  7. [CSS]background背景

    css背景样式 序号  中文说明  标记语法  1  背景颜色  {background-color:数值}  2  背景图片  {background-image: url('imgpath/img ...

  8. C# Message类的属性Msg所关联的消息ID

    C# Message类的属性Msg所关联的消息ID   https://msdn.microsoft.com/en-us/library/windows/desktop/ms645606(v=vs.8 ...

  9. css background 背景知识详解

    background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...

随机推荐

  1. Delphi各销售版本之间的区别

    初步的区别: http://www.embarcadero.com/products/delphi/product-editions http://www.embarcadero.com/fr/pro ...

  2. Cocos2dx如何引用第三方SO文件(Android NDK)

    做项目的过程中发现,引用第三方的库lib3rdsdk.so,当直接把lib3rdsdk.so放进armeabi文件夹里,会被删除掉.查网上资料都说的不全,经过实验,最简单的方法就是在jni下的andr ...

  3. POJ1385 Lifting the Stone 多边形重心

    POJ1385 给定n个顶点 顺序连成多边形 求重心 n<=1e+6 比较裸的重心问题 没有特别数据 由于答案保留两位小数四舍五入 需要+0.0005消除误差 #include<iostr ...

  4. 深入理解JMM(Java内存模型) --(六)final

    与前面介绍的锁和volatile相比较,对final域的读和写更像是普通的变量访问.对于final域,编译器和处理器要遵守两个重排序规则: 在构造函数内对一个final域的写入,与随后把这个被构造对象 ...

  5. openstack cluster 封装

  6. 理解javascript中的事件模型

    javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一.  DOM0级事件模型 DOM0级事件模型是早期的事件 ...

  7. (数论)51NOD 1073 约瑟夫环

    N个人坐成一个圆环(编号为1 - N),从第1个人开始报数,数到K的人出列,后面的人重新从1开始报数.问最后剩下的人的编号.例如:N = 3,K = 2.2号先出列,然后是1号,最后剩下的是3号.In ...

  8. web界面bug-临时

    一.登录页面 二.首页 三.项目 四.项目池 五.专家管理 六.审批 七.日/周报 八.设置

  9. 微信公众号 sign类

    微信公众号 Sign import java.util.UUID; import java.util.Map; import java.util.HashMap; import java.util.F ...

  10. 通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")

    <html> <head> <meta charset="utf-8"> <title>下拉框</title> < ...