background新增的N个强悍功能!!!
background新增的N个强悍功能:
- 首先我们先回顾下background的原有样式:
background-color 背景颜色
- 相关属性值:
- 关键字:red,blue,yellow等具体的颜色单词;
- 十六进制: 0-9,a-f,以“#”开头的6位十六进制数值表示一种颜色,如#f3e1d2;
- rgb: 分别代表red,green,blue,取值范围是0-255,如rgb(102,35,210);
background-image 背景图片
- 通过url引入图片链接地址;
- 本地相对路径地址——url(img/img.jpg);
- 网络绝对路径地址——url(http://imgsrc.baidu.com/forum/pic/item/3812b31bb051f819ca6789eadab44aed2f73e7d4.jpg);附上一张16进制图片列表,有兴趣的朋友可以点开看下;
background-repeat 背景平铺
- no-repeat 不平铺;
- repeat-x 沿着x轴水平平铺;
- repeat-y 沿着y轴垂直平铺;
- repeat 默认值,x轴、y轴都平铺;
background-position 背景定位
- 具体数值: (可以是正值也可以是负值)
- x方向(默认是0)
- 正值从左向右移动,负值从右向左移动;
- y方向(默认是0)
- 正值从上向下移动,负值从下向上移动;
- 百分比:
- 图的百分之N,对齐元素的百分之N;
- 关键字:
- x方向(默认left)
- left(图的左侧和元素左侧对齐)
- center (图的中间和中间左侧对齐)
- right (图的右侧和中间右侧对齐)
- y方向(默认top)
- top (图的顶部和元素顶部对齐)
- center (图的中间和中间左侧对齐)
- bottom (图的底部和元素底部对齐)
background-attachment 背景图滚动
- 相关属性值
- scroll 默认值,背景图随之滚动条移动;
- fixed 背景图固定,不随滚动条移动;此时坐标根据整个可视区计算;
background在CSS3中新增样式:
background-clip 背景裁切
- 决定元素的背景显示在元素的哪个区域里
- 具体数值:
- border-box
- (默认值)元素背景显示在border及border以内;
- padding-box
- 元素背景显示在padding及padding以内;
- content-box
- 只有content区域显示元素背景;
- -webkit-text 只有文字区域显示元素背景;
- 是weikit内核浏览器的私有样式,只在webkit内核下支持,如chrome,Safari;
- 新版本的webkit内核已经不支持此样式,需要写成-webkit-background-clip: text;
- border-box
- [ ]举例
#box {
width: 300px;
height: 300px;
border: 50px solid rgba(0, 0, 0, .3);
padding: 50px;
background: url(img/timg.jpg);
background-clip: content-box;
-webkit-background-clip: text;
}
background-origin 背景原点设置
- 背景的原点默认是在元素padding区域的左上角,即background-position:left top;
- 相关属性值
- border-box
- 背景原点从元素border的左上角开始计算;
- padding-box
- 背景原点从元素padding的左上角开始计算;
- content-box
- 背景原点从元素content的左上角开始计算;
- border-box
- [ ] 举例
#box {
width: 300px;
height: 300px;
border: 50px solid rgba(0, 0, 0, .3);
padding: 50px;
background: url(img/timg.jpg) content-box content-box;
/*background-clip: content-box;
background-origin: content-box;*/
/*复合样式可以写到一条里面,并且,同时有两个值时,默认第一个是origin,第二个是clip;*/
}
background-size 背景图尺寸设置
- 语法:
- background-size: 图片宽度 图片高度;
- 值的类型:
- 具体数值: px;
- 百分比:
- 宽度百分比,根据元素宽度计算;
- 高度百分比,根据元素高度计算;
- 关键字:
- cover 覆盖
- 优先铺满整个元素,等比缩放图片,但图片可能显示不全;
- contain 包含
- 优先显示完整图片,等比缩放图片,但可能铺不满整个元素;
- auto 自动
- 设置宽度,高度auto时,高度随着宽度等比缩放;
- 设置高度,宽度auto时,宽度随着高度等比缩放;
- cover 覆盖
- [ ] 举例
#box {
width: 300px;
height: 400px;
border: 1px solid #000;
overflow: auto;
resize: both;
background: url(img/timg.jpg) no-repeat;
/* background-size: 200px 100px; */
/* background-size: contain; */
background-size: 200px auto;
}
多背景图设置
- 在CSS3中支持给同一个元素,添加多张背景图;
- 每张背景图之间,需要用“,”隔开;
- 先写的背景图显示在上边,后加的显示在下边;
- 多背景图时,如果还要添加背景颜色,要把背景颜色加在最后面;
- [ ] 举例
#box {
width: 700px;
height: 200px;
border: 100px solid rgba(0, 0, 0, 0);
padding: 100px;
background: url(img/timg.jpg) no-repeat padding-box, url(img/timg1.jpg) no-repeat border-box padding-box;
}
linear-gradient 线性渐变
- 渐变颜色设置,或者说过渡点,每个点之间用","隔开 linear-gradient(red,blue,yellow)
- 过渡点的位置设置
- 百分比
- 具体数值
- 当两个颜色的过渡点位置是重叠的,颜色和颜色之间就没有过渡,而是直接跳转;
- 渐变方向设置
- 关键字设置起点(需要加各个浏览器的前缀之后,才能被识别)
- [ ] 举例
#box {
width: 300px;
height: 400px;
border: 2px solid #000;
/* background: linear-gradient(red 0%,blue 10%,yellow 30%); */
background: -webkit-linear-gradient(left top,red 0,blue 20%,yellow 50%);
background: -moz-linear-gradient(left top,red 0,blue 20%,yellow 50%);
background: -ms-linear-gradient(left top,red 0,blue 20%,yellow 50%);
background: linear-gradient(left top,red 0,blue 20%,yellow 50%);
}
角度设置
- 0deg从下向上渐变;
- 默认从上向下渐变;
- 角度增加为顺时针旋转;
repeating-linear-gradient 重复线性渐变
[ ] 举例
#box {
width: 300px;
height: 100px;
border: 2px solid #000;
background: repeating-linear-gradient(90deg, red 0,red 10px,blue 10px, blue 20px, rgba(0, 0, 0, 0) 20px,rgba(0, 0, 0, 0) 30px);
}
- 渐变属性 background-image
radial-gradient 径向渐变
- 渐变颜色设置,或者说过渡点,每个点之间用","隔开
- 过渡点的位置设置
- 百分比<radial-gradient(red 10%, blue 30%);>
- 具体数值
- 当两个颜色的过渡点位置是重叠的,颜色和颜色之间就没有过渡,而是直接跳转
- [ ] 举例
#box {
width: 300px;
height: 300px;
border: 2px solid #000;
background: radial-gradient(closest-side,blue 10%,red 10%, red 95%,blue 95%);
}
- 大小设置
- 具体数值,火狐老版本不支持,以及加了前缀moz依然不支持
- 最近端,最近角,最远端,最远角,包含或覆盖 closest-side, closest-corner, farthest-side, farthest-corner, contain or cover
- 形状设置 ellipse||circle
- 形状设置和大小只能同时设置一个
- 圆心点设置
- 必须加前缀才可以设置
- 关键字
- 具体数值
- [ ] 举例
#box {
width: 300px;
height: 400px;
border: 2px solid #000;
background: -webkit-radial-gradient(10px 100px,farthest-corner, red,blue);
background: -moz-radial-gradient(10px 100px,farthest-corner, red,blue);
background: -ms-radial-gradient(10px 100px,farthest-corner, red,blue);
}
- repeating-radial-gradient 重复径向渐变
- [ ] 举例
#box {
width: 300px;
height: 300px;
border: 2px solid #000;
background: repeating-radial-gradient(blue 30px,red 60px,red,90px,blue 90px);
}
以上是background在css3中的新增样式,这些列举的是比较常用的,在实际工作中经常用到,希望对大家有所帮助!
background新增的N个强悍功能!!!的更多相关文章
- Mybatis入门教程之新增、更新、删除功能_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 上一节说了Mybatis的框架搭建和简单查询,这次我们来说一说用Mybatis进行基本的增删改操作: 一. 插入一条数据 ...
- ABBYY FineReader 15 新增编辑表格单元格功能
ABBYY FineReader 15(Windows系统)新增编辑表格单元格功能,在PDF文档存在表格的前提下,可将表中的每个单元格作为单独的文字块进行单独编辑,单元格内的编辑不会影响同一行中其他单 ...
- 计图(Jittor) 1.1版本:新增骨干网络、JIT功能升级、支持多卡训练
计图(Jittor) 1.1版本:新增骨干网络.JIT功能升级.支持多卡训练 深度学习框架-计图(Jittor),Jittor的新版本V1.1上线了.主要变化包括: 增加了大量骨干网络的支持,增强了辅 ...
- 微信"附近的人"新增商家公众号入驻功能
微信近日升级了“附近的人”,新增商家公众号(认证的服务号和有卡券功能的公众号)可自入驻,这是微信在推出卡券和微信wifi功能后,又一加强连接线下商户能力的功能. 微信在“附近的人”中 增加搜索商户功能 ...
- MySQL 5.7.12新增MySQL Shell命令行功能
在最新发布的MySQL 5.7.12中有许多令人兴奋的新功能,对于MySQL开发者来说,最令人兴奋的莫不是新增的MySQL Shell了,其下载地址: http://dev.mysql.com/d ...
- HTML5新增的一些属性和功能之一
大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...
- HTML5新增的表单验证功能
一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...
- MYSQL 5.7 新增150多个新功能
http://www.thecompletelistoffeatures.com/ There are over 150 new features in MySQL 5.7. The MySQL ma ...
- HTML5新增的一些属性和功能之六——拖拽事件
拖放事件的前提是分为源对象和目标对象,你鼠标拖着的是源对象,你要放置的位置是目标对象,区分这两个对象是因为HTML5的拖放事件对两者是不同的. 被拖动的源对象可以触发的事件: 1).ondragsta ...
随机推荐
- strtol函数 将字符串转换为相应进制的整数
转自http://hi.baidu.com/qwpsmile/blog/item/9bc44efa4f41018a9f514637.html +----------------+| strt ...
- 【C++】智能指针详解(二):auto_ptr
首先,我要声明auto_ptr是一个坑!auto_ptr是一个坑!auto_ptr是一个坑!重要的事情说三遍!!! 通过上文,我们知道智能指针通过对象去管理指针,在构造对象时完成资源的分配及初始化,在 ...
- Laravel Session 遇到的坑
这两天遇到了一个很奇怪的问题,更新session ,session的值不变.经过一番追查,终于找到问题,并搞明白了原理.写这篇博客记录下. 框架版本 Laravel 5.4 问题 先来描述下问题,我在 ...
- Windows 10 系统Microsoft Edge的使用手册
Windows 10 默认浏览器(Edge)使用手册 体验网络有了一种新的方法.只有在 Windows 10 上才能找到它. 下面详细介绍一下Edge浏览器的使用规范: 一.打开Windows10系统 ...
- Itext中 根据html生成Word文件,包含图片
package cn.com.wzf; import java.io.FileOutputStream; import java.io.OutputStream; import java.io.Str ...
- 5.Redis常用命令:Hash
我们可以将Redis中的Hashes类型看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息.如Username.Password和Age等.如果H ...
- .NET中数据访问方式(一):LINQ
语言集成查询(Language-Integrated Query),简称LINQ,.NET中的LINQ体系如下图所示: 在编程语言层次,LINQ对于不同的数据源提供了相同的查询语法,方便了程序员操 ...
- python 面向对象编程(一)
一.如何定义一个类 在进行python面向对象编程之前,先来了解几个术语:类,类对象,实例对象,属性,函数和方法. 类是对现实世界中一些事物的封装,定义一个类可以采用下面的方式来定义: class c ...
- listview展示倒计时
public class MainActivity extends Activity { /**截至时间数据源**/ private List<Date> listData; /**当前时 ...
- 【转】JDBC学习笔记(5)——利用反射及JDBC元数据编写通用的查询方法
转自:http://www.cnblogs.com/ysw-go/ JDBC元数据 1)DatabaseMetaData /** * 了解即可:DatabaseMetaData是描述数据库的元数据对象 ...