background 背景类八大属性
background 背景类八大属性
- 背景颜色(当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上)
- background-image:背景图像
- background-repeat:背景图像如何铺排填充
- repeat-x: 背景图像在横向上平铺
- repeat-y: 背景图像在纵向上平铺
- repeat: 背景图像在横向和纵向平铺
- no-repeat: 背景图像不平铺
- background-attachment :设置或检索背景图像是随对象内容滚动还是固定的
- fixed: 背景图像相对于窗体固定。
scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
- fixed: 背景图像相对于窗体固定。
- 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 背景类八大属性的更多相关文章
- 前端之CSS列表及背景类属性
一.列表类属性: 1.列表符号样式: list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式); 2. ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
- css3新增属性-background背景
css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...
- 【C#/WPF】Button按钮动态设置Background背景颜色
学习笔记: 在XAML中给Button设置颜色大家都懂的,本篇只是记录用C#代码动态生成的按钮设置Background背景颜色. new一个Button,设置Background时可看到该属性类型是S ...
- PyQt(Python+Qt)入门:Designer组件属性编辑界面中QWidget类相关属性详解
本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...
- [CSS]background背景
css背景样式 序号 中文说明 标记语法 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url('imgpath/img ...
- C# Message类的属性Msg所关联的消息ID
C# Message类的属性Msg所关联的消息ID https://msdn.microsoft.com/en-us/library/windows/desktop/ms645606(v=vs.8 ...
- css background 背景知识详解
background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
随机推荐
- Delphi各销售版本之间的区别
初步的区别: http://www.embarcadero.com/products/delphi/product-editions http://www.embarcadero.com/fr/pro ...
- Cocos2dx如何引用第三方SO文件(Android NDK)
做项目的过程中发现,引用第三方的库lib3rdsdk.so,当直接把lib3rdsdk.so放进armeabi文件夹里,会被删除掉.查网上资料都说的不全,经过实验,最简单的方法就是在jni下的andr ...
- POJ1385 Lifting the Stone 多边形重心
POJ1385 给定n个顶点 顺序连成多边形 求重心 n<=1e+6 比较裸的重心问题 没有特别数据 由于答案保留两位小数四舍五入 需要+0.0005消除误差 #include<iostr ...
- 深入理解JMM(Java内存模型) --(六)final
与前面介绍的锁和volatile相比较,对final域的读和写更像是普通的变量访问.对于final域,编译器和处理器要遵守两个重排序规则: 在构造函数内对一个final域的写入,与随后把这个被构造对象 ...
- openstack cluster 封装
- 理解javascript中的事件模型
javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一. DOM0级事件模型 DOM0级事件模型是早期的事件 ...
- (数论)51NOD 1073 约瑟夫环
N个人坐成一个圆环(编号为1 - N),从第1个人开始报数,数到K的人出列,后面的人重新从1开始报数.问最后剩下的人的编号.例如:N = 3,K = 2.2号先出列,然后是1号,最后剩下的是3号.In ...
- web界面bug-临时
一.登录页面 二.首页 三.项目 四.项目池 五.专家管理 六.审批 七.日/周报 八.设置
- 微信公众号 sign类
微信公众号 Sign import java.util.UUID; import java.util.Map; import java.util.HashMap; import java.util.F ...
- 通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")
<html> <head> <meta charset="utf-8"> <title>下拉框</title> < ...