前端设计师必知的background属性(有CSS3内容)
来源:互联网 发布:mysql运维内参pdf下载 编辑:程序博客网 时间:2024/04/29 21:17
背景属性——background是css中的核心属性。你应该对它有充分的了解。这篇文章详细讨论了background的所有相关属性,甚至包括background-attachment,还为我们介绍了它在即将到来的CSS3中的样子,还有那些新加入的背景属性。
css2中有五个与背景相关的属性。它们是:
- background-color: 完全填充背景的颜色
- background-image: 用作背景的图片
- background-position: 确定背景图片的位置
- background-repeat: 确定背景图片是否重复铺平
- background-attachment: 确定背景图片是否随页面滚动
基本属性
如果图片在文件夹内,就写成这样,均是用得相对路径:
/* Example 1: 默认. */
- left
- center
- right
垂直方向有:
- top
- center
- bottom
就像之前那样使用它们:
background-position: top right;
百分比的使用方法也一样:
再看一个fixed例子:
例如, 这些设定...
background-color: transparent;
背景的“非常规”应用
背景属性除了设置美化元素之外,也有其他广泛的非常规用途。
Faux Columns
Text Replacement
Easier Bullet Points
ul {
CSS3中的背景属性
多背景图片
background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
新属性1: Background Clip
- background-clip: border-box; background 在 border 内显示,和现在的方式一样。.
- background-clip: padding-box; backgrounds 在 padding内显示,而非border,跟IE6的处理方式相同。
- background-clip: content-box; backgrounds 只显示在内容内, 而非border 或 padding。
- background-clip: no-clip; 默认值,和border-box一样。
新属性2: Background Origin
这个属性需要和background-position属性一起使用。你可以改变background-position 的计算方式(就像 background-clip一样).
- background-origin: border-box; background-position 从border开始计算。
- background-origin: padding-box; background-position从padding开始计算。
- background-origin: content-box; background-position从内容开始计算。
想看background-clip和background-origin属性应用的例子请看CSS3.info.
新属性3: Background Size
background-size属性用来重定义你的背景图片大小。其可能值有:
- background-size: contain; 缩小图片以符合元素大小。
- background-size: cover; 扩展图片以符合元素大小。
- background-size: 100px 100px; 重定义大小。
- background-size: 50% 100%; 用百分比重定义。
你可以看看例子:CSS 3 specifications
新属性4: Background Break
CSS 3中, 元素能分拆成多个部分(例如inline元素span能占多个行)。background-break属性控制背景图像如何在多个部分展示。
还记得CSS 2中图片可能会因过界而部分消失吗? CSS 3 有两个新可能值来解决这一问题:
- space: 设置重复图片的间距。
- round: 重复图片自动调整大小以正好填充元素。
background-repeat: space的例子:CSS 3 specifications。
Background Attachment属性的改变
background-attachment有个新可能值: local.。它与可滚动的元素相关(比如拥有属性overflow: scroll;).。当background-attachment值为scroll时, 背景图片不会随内容滚动。现在有background-attachment:local,图片可以随内容一起滚动.
- 前端设计师必知的background属性(有CSS3内容)
- 前端设计师必知的background属性(有CSS3内容)
- 前端设计师必知的background属性(有CSS3内容)
- css 前端设计师必知的background属性(有CSS3内容)
- 前端设计师必知的background属性(有CSS3内容)
- Web 前端开发者必知的9 个 CSS3 属性
- css3的Background新属性
- 太原WEB前端工程师,太原UI设计师,太原网络营销师汇总将CSS3的调用动画(动画属性)
- 专业设计师有哪些必知的设计流程
- CSS3中background属性的调整
- CSS3 background-size属性
- css3--background属性
- CSS3 background-attachment:属性
- CSS3 background-clip 属性
- CSS3 background-size 属性
- CSS3 background 属性
- CSS3属性之background
- CSS3:background-size属性
- SQL Server开发人员应聘常被问的问题妙解汇总
- 使用T-SQL操作面试SQL Server开发人员
- ITIL的開源軟件
- 学习基于SQL数据库的算法
- 影响SQL Server性能的三个关键点
- 前端设计师必知的background属性(有CSS3内容)
- Easy way to install the bluetooth(BCM2045A)
- WEBLOGIC项目中注意的一些事项
- 用VMWare搭建windows server 2003 实验
- .Net下的Windows服务程序开发指南
- 等待几秒后自动跳转(后台实现)
- 页面里嵌入播放器,并获取当前视频的播放总时间
- poj 1129 DFS 无剪枝就可AC
- sql server中扩展存储过程大全