一、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背景与渐变的更多相关文章

  1. 从零开始学习前端开发 — 11、CSS3选择器

    一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...

  2. 从零开始学习前端开发 — 16、CSS3圆角与阴影

    一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...

  3. 从零开始学习前端开发 — 15、CSS3过渡、动画

    一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...

  4. 从零开始学习前端开发 — 14、CSS3变形基础

    一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...

  5. 从零开始学习前端开发 — 12、CSS3弹性布局

    一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...

  6. 从零开始学习前端开发 — 2、CSS基础

    一.CSS简介  1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...

  7. 从零开始学习前端开发 — 3、CSS盒模型

    ★  css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...

  8. 从零开始学习前端开发 — 18、BFC

    一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left ...

  9. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

随机推荐

  1. Maven安装教程

    一.安装Maven及配置环境变量 1.Maven官网地址:http://maven.apache.org/download.cgi  下载apache-maven-3.5.0-bin.zip文件 2. ...

  2. 阿里云Centos7 apache配置

    其实很简单,主要是有坑. 首先填坑,在阿里云安全策略上开放要访问的端口,然后配置firewall添加对应端口开放. firewall-cmd --zone=public --add-port=8011 ...

  3. 让你彻底弄清offset

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  4. ES6(一) let and const

    1.let 用于变量声明,仅在块级作用域内有效. ES6新增了块级作用域,在ES5中没有块级作用域这个概念. { let a = 10; var b = 1; } console.log(b); // ...

  5. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  6. css实现梯形标签页

    html <nav>click me</nav> css nav{ position: relative; display: inline-block; padding: 15 ...

  7. 企业级memcached缓存数据库结合php使用与web管理memcached

    环境 [root@cache01 ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@cache01 ~]# uname -a ...

  8. .NET Core RSA密钥的xml、pkcs1、pkcs8格式转换和JavaScript、Java等语言进行对接

    众所周知在.NET下的RSA类所生成的密钥为Xml格式,而其他语言比如java一般使用pkcs8格式的密钥,JavaScript一般使用pkcs1格式.我们在开发过程中很可能遇到需要与其他语言开发的a ...

  9. 【倍增】洛谷P3379 倍增求LCA

    题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...

  10. replace into 浅析之一

    一 介绍  在笔者支持业务过程中,经常遇到开发咨询replace into 的使用场景以及注意事项,这里做个总结.从功能原理,性能和注意事项上做个说明.二 原理2.1 当表中存在主键但是不存在唯一建的 ...