[CSS3] Background
来源:互联网 发布:单词朗读软件 编辑:程序博客网 时间:2024/05/20 02:27
background: image | position | size | repeat | attachment | clip |origin
(1) 基础
background-color
background-image: url();
background-repeat: repeat-x repeat-y
background-attachment: scroll fixed
(背景图片是否随着页面滚动)
(取值fixed的时候, 一般用在html或body上面 其他标签达不到目的)
background-position: center left right top bottom
(2) Updata
[1] background-origin
div{ display: inline-block; padding:30px; width:100px; height:100px; margin:10px; border:25px solid green; background:url(../1.jpg) no-repeat; font-weight: bold;}.div2{ /*以内容为起点*/ background-origin:content-box;}.div3{ /*以padding为起点*/ background-origin:padding-box;}.div4{ /*以border为起点*/ background-origin:border-box;}
[2] background-clip
将background-orign-> 改成 clip
其实background-clip: 决定背景在哪些区域显示。
(1) 值为border = border+补白+content
(2) 值为padding= 补白+content
(3) 值为content =content
background-origin & clip区别:
background-orign指的是 从哪个位置显示
background-clip更多的是关注 clip 修剪, 在哪个位置显示
background-orign
background-clip
[3] background-size
background-size: cover是填充
background-size: contain是图片等比例的缩放 缩放到宽度或者高度适合
[4] background-break
内联元素 定义背景方式
0 0
- [CSS3] Background
- <css3>background
- CSS3 Background
- CSS3 background
- 【CSS3】---background-origin background-clip background-size
- CSS3 background-size属性
- css3 background-size 用法
- css3 background-size
- CSS3 Background-clip
- CSS3 Multiple Background
- CSS3之多背景background
- css3的background-origin
- CSS3之background-origin
- CSS3之background-clip
- CSS3 Background-size
- CSS3详解:background
- CSS3-background-size
- CSS3 Background-size 详解
- Linux Socket编程(不限Linux)
- Android 之使用LocalBroadcastManager解决BroadcastReceiver安全问题
- 堆和栈的区别 (转贴)
- 蓝桥杯历年预赛习题
- 零基础学习MVC(一)
- [CSS3] Background
- ASP.NET后台弹出Confirm对话框供用户进行操作
- Conclusion for Implementations
- css_1
- GDB的使用
- RadioButton实现自动换行的效果
- xcode工程配置及推送证书制作
- Linux下安装gcc编译器简要步骤
- window系统下的安装版tomcat安装过程