css3学习总结4--CSS3背景
2015-07-06 15:02
741 查看
css3背景
1. background-size
2. background-origin
3. background-clip
示例:
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
background-size两个参数可以设置成和原图像不一样大小的尺寸,不过那样背景图片就被拉伸了
背景图片可以放置于 content-box、padding-box 或 border-box 区域
示例:
[b]总结:[/b]
1. background-size
2. background-origin
3. background-clip
示例:
className { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; }
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
background-size两个参数可以设置成和原图像不一样大小的尺寸,不过那样背景图片就被拉伸了
background-origin 属性
background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域
示例:
.className{ background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; }
多重背景图片
CSS3 允许您为元素使用多个背景图像。实例:
为 body 元素设置两幅背景图片:body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }
background-clip 属性
标签定义及使用说明
JavaScript 语法:object object.style.backgroundClip="content-box"
语法
background-clip: border-box|padding-box|content-box;
值 | 说明 |
---|---|
border-box | 默认值。背景绘制在边框方框内(剪切成边框方框)。 |
padding-box | 背景绘制在衬距方框内(剪切成衬距方框)。 |
content-box | 背景绘制在内容方框内(剪切成内容方框)。 |
实例
规定背景的绘制区域:.className { background-color:yellow; background-clip:content-box; }
[b]总结:[/b]
属性 | 描述 | CSS |
---|---|---|
background-clip | 规定背景的绘制区域。 | 3 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-size | 规定背景图片的尺寸。 | 3 |
相关文章推荐
- css3学习总结3--CSS3图像边框
- CSS3 Transitions, Transforms和Animation使用简介与应用展示
- 【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇
- css笔记11:选择器练习
- css笔记10:多个id选择器/类选择器包含相同部分问题的探讨
- CSS3制作精美的iphone电话图标,不使用图片
- css笔记09:选择器优先级
- css3学习总结2--CSS3圆角边框
- css3学习总结1--CSS3选择器
- css 浮动
- CSS学习笔记(记录一些小技巧)
- css笔记08:id选择器之父子选择器
- css中的颜色及长度
- css字体属性(font)
- Google HTML/CSS代码风格指南(中文版)
- CSS属性选择器
- css笔记07:通配符选择器
- css积累
- css3 图片翻转效果
- CSS3实现10种Loading效果