浅谈css背景
来源:互联网 发布:上海编程培训机构 编辑:程序博客网 时间:2024/05/02 02:30
一、css的元素盒子可以看成是两个图层组成,前景层和背景层。背景不能撑起盒子,若盒子的前景层里没有内容(文本图片等),又没有设置宽高,则显示不出来背景。
二、背景的属性有很多
1、background-color(背景颜色)
它的值可以是#,可以是如red,也可以是rgb(),或者是rgba();
注意:rgba(),是有设置背景颜色的透明度,但属性opacity则可以使应用这个属性的元素所有的内容都有透明度,包括图片文字按钮等
2、background-image (背景图片),图片会默认以左上角为起点重复
3、background-repeat(背景重复)属性值有 repeat-x;repeat-y;no-repeat;
4、background-position(背景位置)可以使用关键字值 top left bottom right center 两两组合;也可使用百分比;也可以使用像素单位(可以设负值)
5、backgroung-size(背景尺寸)值有 百分比(缩放比例);100px,800px(具体设置大小);cover(拉大图片,使其完全填满背景区,保持宽高比);contain(缩放图片,使其恰好适应背景区,保持宽高比)
注意:图片的缩放会导致一定程度的失真
6、background-attachment(背景粘贴)值有scroll和fixed
7、background-origin(背景图片的定位区域)
padding-box背景图像填充框的相对位置border-box背景图像边界框的相对位置content-box背景图像的相对位置的内容框8、background-clip(背景绘制区域)
border-box默认值。背景绘制在边框方框内(剪切成边框方框)。padding-box背景绘制在衬距方框内(剪切成衬距方框)。content-box背景绘制在内容方框内(剪切成内容方框)。
9、渐变背景- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
- 径向渐变(Radial Gradients)- 由它们的中心定义
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
0 0
- 浅谈css背景
- CSS 背景
- CSS 背景
- CSS背景
- CSS背景
- css 背景
- CSS 背景
- CSS背景
- CSS背景
- Css背景
- css 背景
- css背景
- CSS背景
- css背景
- css背景
- CSS--背景
- css背景
- CSS 背景
- 在有子类的时候,其构造函数的执行及顺序。
- 可变参数的应用
- Cocos游戏引擎VRDemo正式放出 助力虚拟现实游戏开发
- 3.31日学习记录
- jar7
- 浅谈css背景
- 了解RxJava之Android响应式编程(四)
- Spring
- 03-Eclipse中maven的helloWorld
- Android调试,The selected device is incompatible
- windows内核情景分析笔记------内核对于物理页面的管理
- Android 中Fragment与Activity通信大汇总
- leetcode_147 Insertion Sort List
- ubuntu server 改变phpmyadmin的默认访问路径