从零开始学习前端开发 — 17、CSS3背景与渐变
一、css3背景切割: background-clip:border-box|padding-box|content-box;
作用: 用来设置背景的可见区域
a) border-box 默认值,背景在边框及边框以内的区域可见
b) padding-box 背景在padding及padding以内的区域可见
c) content-box 背景在content区域可见
二、背景原点: background-origin:padding-box|border-box|content-box;
作用:background-origin用来设置背景图像的定位区域
a) padding-box 默认值,背景原点在padding区域
b) border-box 背景原点在border区域
c) content-box 背景原点在content区域
三、背景切割&背景原点:background-clip和background-origin结合使用
background-origin:content-box;
background-clip:padding-box;
背景原点在content区域,背景在padding以内的区域可见
四、背景图尺寸:background-size:值;
1) length
可以设置背景图的宽度和高度,第一个值代表宽度,第二个值代表高度,如果省略第二个值,默认为auto,等比例缩放
eg: background-size:500px 300px; (背景图有可能会发生变形)
background-size:500px; (背景图等比例缩放)
2) 百分比
可以以父元素容器的百分比来设置背景图的尺寸,第一个值代表宽度,第二个值代表高度,如果省略第二个值,默认为auto
eg: background-size:100% 100%; (背景图有可能会发生变形)
3) cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像有可能超出容器,背景图像不会发生变形
4) contain
把图像扩展至最大尺寸,以使宽度和高度 完全适应内容区域。背景图像始终被包含在容器内,
背景图不会发生变形
五、设置透明背景: background:rgba(r,g,b,a); a代表透明度
eg: background:rgba(0,0,0,.4);
注:rgba和opacity的区别:
设置rgba背景带有一定的透明度,容器中的文字和图片不会跟随透明
设置opacity是给整个容器添加一定的透明度,文字和图片也会透明
六、颜色模式: background:hsla(h,s,l,a);
h: 色调,取值范围0~360
s: 饱和度,取值范围 0%~100%
l: 亮度,取值范围0%~100%
a: 透明度,取值范围0~1
七、线性渐变: background:linear-gradient(方向,颜色值 位置,颜色值 位置);
eg: background:linear-gradient(to right,red 0%,yellow 30%,green 35%);
注:重复线性渐变
eg: background:repeating-linear-gradient(red 0%,yellow 10%,green 20%);
设置重复线性渐变时,一定要自定义线性渐变的位置
八、径向渐变: background:-webkit-radial-gradient(中心点位置,形状 渐变半径,颜色 位置,颜色 位置);
eg: background:-webkit-radial-gradient(10% 80%,circle closest-corner,red 0%,yellow 15%,green 25%);
注:渐变半径可选参数值:
a) closest-corner 圆心到离圆心最近的角
b) closest-side 圆心到离圆心最近的边
c) farthest-corner 圆心到离圆心最远的角
d) farthest-side 圆心到离圆心最远的边
注:重复径向渐变
eg: background:-webkit-repeating-radial-gradient(red 0%,yellow 5%,green 10%);
扩展:
1.添加蒙版
语法:-webkit-mask-image:url(蒙版图片路径)|使用渐变作为蒙版;
-webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;
-webkit-mask-position:left center;
2.设置背景可视区域为文字区域
语法: -webkit-background-clip:text;
注:设置此属性,文字颜色需要设置为透明(即color:transparent)
3.倒影:-webkit-box-reflect:倒影方向 偏移量 倒影渐变;
a) 倒影方向 left|right|above(上)|below(下)
b) 偏移量
从零开始学习前端开发 — 17、CSS3背景与渐变的更多相关文章
- 从零开始学习前端开发 — 11、CSS3选择器
一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...
- 从零开始学习前端开发 — 16、CSS3圆角与阴影
一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- 从零开始学习前端开发 — 14、CSS3变形基础
一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...
- 从零开始学习前端开发 — 12、CSS3弹性布局
一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- 从零开始学习前端开发 — 3、CSS盒模型
★ css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...
- 从零开始学习前端开发 — 18、BFC
一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left ...
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...
随机推荐
- 《Create Your own PHP Framework》笔记
前言 大力推荐该教程:<Create Your own PHP Framework> Symfony的学习蛮累的,官方文档虽然很丰富,但是组织方式像参考书而不是指南,一些不错的指导性文档常 ...
- jquery获取select选中的值
http://blog.csdn.net/renzhenhuai/article/details/19569593 误区: 一直以为jquery获取select中option被选中的文本值,是这样写的 ...
- thinkinginjava学习笔记06_复用类
MarsEdit粘代码好麻烦,所有代码交给github:https://github.com/lozybean/MyJavaLearning 复用一个类常用的两种方式:组合.继承: 组合 将对象引用置 ...
- Matplotlib初体验
为一个客户做了关于每个差异otu在时间点上变化的折线图,使用python第一次做批量作图的程序,虽然是很简单的折线图,但是也是第一次使用matplotlib的纪念. ps:在第一个脚本上做了点小的改动 ...
- ABP架构学习系列一 整体项目结构及目录
本系列是基于aspnetboilerplate-0.8.4.0版本写的,其中原因是由于较高的版本太抽象难以理解和分析,对于还菜菜的我要花更多的时间去学习. abp的源码分析学习主要来源于 HK Zha ...
- Nginx 学习笔记(七)如何解决nginx: [emerg] bind() to [::]:80 failed (98: Address already in use)
出现:nginx: [emerg] bind() to [::]:80 failed (98: Address already in use) 错误,有以下两种情况 1.80端口被占用 2.ipv4端 ...
- [Spark性能调优] 第一章:性能调优的本质、Spark资源使用原理和调优要点分析
本課主題 大数据性能调优的本质 Spark 性能调优要点分析 Spark 资源使用原理流程 Spark 资源调优最佳实战 Spark 更高性能的算子 引言 我们谈大数据性能调优,到底在谈什么,它的本质 ...
- linux下vsftpd的安装及配置使用详细步骤
vsftpd 是“very secure FTP daemon”的缩写,安全性是它的一个最大的特点. vsftpd 是一个 UNIX 类操作系统上运行的服务器的名字,它可以运行在诸如 Linux.BS ...
- @EnableAsync annotation metadata was not injected
[问题描述] @EnableAsync annotation metadata was not injected spring配置初始化时候报错 nested exception is java.la ...
- word在线问题
1.js代码如下 var sdata = "";$(function(){ var pathdoc = path.split("."); var explore ...