css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果
css3背景图像相关
兼容性：IE9+
background-clip 背景图片绘制区域
background-clip:border-box; 内容区
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:url(source/p3.jpg) center;
padding:50px;
border:50px solid transparent;
background-clip:content-box;
/*background-clip:padding-box;*/
/*background-clip:border-box;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-clip:padding-box; padding区域
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:url(source/p3.jpg) center;
padding:50px;
border:50px solid transparent;
background-clip:padding-box;
/*background-clip:border-box;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-clip:border-box; border区域
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:url(source/p3.jpg) center;
padding:50px;
border:50px solid transparent;
background-clip:border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-origin: content-box | padding-box | border-box; 背景图片起始位置
背景图片从border-box开始水平垂直向下偏移50px
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:url(source/p3.jpg) 50px 50px no-repeat;
padding:50px;
border:50px solid transparent;
background-origin:border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景图片从padding-box开始水平垂直向下偏移50px
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:url(source/p3.jpg) 50px 50px no-repeat;
padding:50px;
border:50px solid transparent;
background-origin:padding-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景图片从content-box开始水平垂直向下偏移50px
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:url(source/p3.jpg) 50px 50px no-repeat;
padding:50px;
border:50px solid transparent;
background-origin:content-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-size: 填写数值或者百分比时，如果只填写一个值，另一个值默认为auto
cover 等比缩放填满容器
contain 等比缩放至一边碰到容器边
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:url(source/p2.jpg) 50px 50px no-repeat;
background-size:100%;/*宽度为容器宽度的100%，高度按图片比例来*/
background-size:100% 100%;/*宽度为容器宽度的100%，高度为容器高度的100%*/
background-size:cover;
background-size:contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
多重背景图片
background-image:url(),url();
前面的图片会覆盖后面的图片
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background-image:url(source/shuiyin.png), url(source/cat.jpg); }
</style>
</head>
<body>
<div></div>
</body>
</html>
颜色设置为透明：transparent
css3渐变
兼容性：IE10
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:-webkit-linear-gradient(pink, orange, #abcdef);/*默认是垂直方向*/
background: -moz-linear-gradient(pink, orange, #abcdef);/*默认是垂直方向*/
background: -o-linear-gradient(pink, orange, #abcdef);/*默认是垂直方向*/
background: linear-gradient(pink, orange, #abcdef);/*默认是垂直方向*/ background:-webkit-linear-gradient(left, pink, orange, #abcdef);/*从左到右*/
background: -moz-linear-gradient(right, pink, orange, #abcdef);
background: -o-linear-gradient(right, pink, orange, #abcdef);
background: linear-gradient(to right, pink, orange, #abcdef); background:-webkit-linear-gradient(left top, pink, orange, #abcdef);/*从左上到右下*/
background: -moz-linear-gradient(right bottom, pink, orange, #abcdef);
background: -o-linear-gradient(right bottom, pink, orange, #abcdef);
background: linear-gradient(to right bottom, pink, orange, #abcdef);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
正常情况下线性渐变的角度
webkit内核下线性渐变的角度
解决方法：兼容浏览器的前缀按顺序书写，正常情况下无前缀的放在最后
颜色可以具体分配位置
第一个颜色不写默认是0%的位置；最后一个颜色默认是100%的位置
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:-webkit-linear-gradient(45deg, pink, orange, #abcdef);/*具体角度表示*/
background: -moz-linear-gradient(45deg, pink, orange, #abcdef);
background: -o-linear-gradient(45deg, pink, orange, #abcdef);
background: linear-gradient(45deg, pink, orange, #abcdef); background:-webkit-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
background: -moz-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
background: -o-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
background: linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
rgba() 可以设置带透明色的渐变
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:-webkit-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));/*具体角度表示*/
background: -moz-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
background: -o-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
background: linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1)); }
</style>
</head>
<body>
<div></div>
</body>
</html>
重复渐变
repeating-linear-gradient
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background:-webkit-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
background: -moz-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
background: -o-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
background: repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%); }
</style>
</head>
<body>
<div></div>
</body>
</html>
径向渐变 radial-gradient
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 400px;
height: 200px;
border-radius:50%;
background:-webkit-radial-gradient(pink, #abcdef);
background: -moz-radial-gradient(pink, #abcdef);
background: -o-radial-gradient(pink, #abcdef);
background: radial-gradient(pink, #abcdef);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
保持圆形渐变
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 400px;
height: 200px;
border-radius:50%;
background:-webkit-radial-gradient(circle, pink, #abcdef);
background: -moz-radial-gradient(circle, pink, #abcdef);
background: -o-radial-gradient(circle, pink, #abcdef);
background: radial-gradient(circle, pink, #abcdef);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
尺寸大小 closest-side closest-corner farthest-side farthest-corner
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 100px;
border-radius:50%;
margin-bottom:50px;
line-height: 100px;
text-align: center;
/* background:-webkit-radial-gradient(circle, pink, #abcdef);
background: -moz-radial-gradient(circle, pink, #abcdef);
background: -o-radial-gradient(circle, pink, #abcdef);
background: radial-gradient(circle, pink, #abcdef);*/
}
div:nth-child(1){
background:-webkit-radial-gradient(closest-side circle, pink, #abcdef);
background: -moz-radial-gradient(closest-side circle, pink, #abcdef);
background: -o-radial-gradient(closest-side circle, pink, #abcdef);
background: radial-gradient(closest-side circle, pink, #abcdef);
}
div:nth-child(2){
background:-webkit-radial-gradient(closest-corner circle, pink, #abcdef);
background: -moz-radial-gradient(closest-corner circle, pink, #abcdef);
background: -o-radial-gradient(closest-corner circle, pink, #abcdef);
background: radial-gradient(closest-corner circle, pink, #abcdef);
}
div:nth-child(3){
background:-webkit-radial-gradient(farthest-side circle, pink, #abcdef);
background: -moz-radial-gradient(farthest-side circle, pink, #abcdef);
background: -o-radial-gradient(farthest-side circle, pink, #abcdef);
background: radial-gradient(farthest-side circle, pink, #abcdef);
}
div:nth-child(4){
background:-webkit-radial-gradient(farthest-corner circle, pink, #abcdef);
background: -moz-radial-gradient(farthest-corner circle, pink, #abcdef);
background: -o-radial-gradient(farthest-corner circle, pink, #abcdef);
background: radial-gradient(farthest-corner circle, pink, #abcdef);
}
</style>
</head>
<body>
<div>closest-side</div>
<div>closest-corner</div>
<div>farthest-side</div>
<div>farthest-corner</div>
</body>
</html>
设置渐变的圆心位置
水平方向为宽度的10%，垂直方向为高度的20%
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 100px;
margin-bottom:50px;
line-height: 100px;
text-align: center;
/* background:-webkit-radial-gradient(circle, pink, #abcdef);
background: -moz-radial-gradient(circle, pink, #abcdef);
background: -o-radial-gradient(circle, pink, #abcdef);
background: radial-gradient(circle, pink, #abcdef);*/
}
div:nth-child(1){
background:-webkit-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
background: -moz-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
background: -o-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
background: radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
}
div:nth-child(2){
background:-webkit-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
background: -moz-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
background: -o-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
background: radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
}
div:nth-child(3){
background:-webkit-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
background: -moz-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
background: -o-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
background: radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
}
div:nth-child(4){
background:-webkit-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
background: -moz-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
background: -o-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
background: radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
}
</style>
</head>
<body>
<div>closest-side</div>
<div>closest-corner</div>
<div>farthest-side</div>
<div>farthest-corner</div>
</body>
</html>
repeating-radial-gradient 重复径向渐变
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 100px;
margin-bottom:50px;
line-height: 100px;
text-align: center;
background:-webkit-repeating-radial-gradient(circle, pink, #abcdef 20%);
background: -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
background: -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
background: repeating-radial-gradient(circle, pink, #abcdef 20%);
} </style>
</head>
<body>
<div></div>
</body>
</html>
IE浏览器渐变
IE10+ 支持gradient 渐变
IE6-8 使用filter
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 100px;
margin-bottom:50px;
line-height: 100px;
text-align: center;
background:-webkit-repeating-radial-gradient(circle, pink, #abcdef 20%);
background: -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
background: -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
background: repeating-radial-gradient(circle, pink, #abcdef 20%);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=pink,endcolorstr=#abcdef,gradientType=1);
} </style>
</head>
<body>
<div></div>
</body>
</html>
使用IE控制台可切换IE浏览器版本
IE filter
0 从左到右线性渐变
1 从上到下线性渐变
实际案例：
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 600px;
height: 300px;
background-color:#abcdef;
background-size:100px 100px;
background-image:-webkit-linear-gradient(45deg, pink 25%, transparent 25%),
-webkit-linear-gradient(-45deg, pink 25%, transparent 25%),
-webkit-linear-gradient(45deg, transparent 75%, pink 75%),
-webkit-linear-gradient(-45deg, transparent 75%, pink 75%);
background-image:-moz-linear-gradient(45deg, pink 25%, transparent 25%),
-moz-linear-gradient(-45deg, pink 25%, transparent 25%),
-moz-linear-gradient(45deg, transparent 75%, pink 75%),
-moz-linear-gradient(-45deg, transparent 75%, pink 75%);
background-image:-o-linear-gradient(45deg, pink 25%, transparent 25%),
-o-linear-gradient(-45deg, pink 25%, transparent 25%),
-o-linear-gradient(45deg, transparent 75%, pink 75%),
-o-linear-gradient(-45deg, transparent 75%, pink 75%);
background-image:linear-gradient(45deg, pink 25%, transparent 25%),
linear-gradient(-45deg, pink 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, pink 75%),
linear-gradient(-45deg, transparent 75%, pink 75%);
} </style>
</head>
<body>
<div></div>
</body>
</html>
css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果的更多相关文章
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
- CSS3 边框 圆角 背景
CSS3用于控制网页的样式布局. CSS3是最新的CSS标准. 关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...
- css3新增的背景属性
有时候我们需要往边框文字上添加背景与背景图片的时候就有用处了 background的css3有两个新增属性分别是background-clip与background-origin;背景-修剪与背景起点 ...
- HTML连载15-文本属性&颜色控制属性
一.文本装饰的属性 1.格式:text-decoration:underline; 2.取值: (1)underline代表下划线 (2)line-through代表删除线 (3)overline代表 ...
- CSS3文字、背景与列表
一.文本相关属性 1.字体 (1)字体设置 在HTML中,字体通过<font face="字体名称">来设置.在CSS中字体通过font-family属性来控制,里面可 ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- css3新增属性有哪些？css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- css3种引入方式,样式与长度颜色,常用样式,css选择器
# CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; backgr ...
随机推荐
- Java 中的运算符和流程控制
Java 中的运算符和流程控制 + 面试题 算术运算符 Java 中的算术运算符,包括以下几种: **算术运算符** **名称** **举例** + 加法 1+2=3 - 减法 2-1=1 \* 乘法 ...
- OpenResty学习指南（二）
我的个人博客:https://www.luozhiyun.com/ 数据结构table table并没有区分开数组.哈希.集合等概念,而是揉在了一起. local color = {first = & ...
- 《快乐编程大本营》java语言训练班 2课:java的变量
<快乐编程大本营>java语言训练班 2课:java的变量 1变量介绍 2变量分类,数值变量 3变量分类-字符串变量 4变量分类-布尔变量 5变量分类-对象 http://code6g.c ...
- Ceph 存储集群2-配置：心跳选项、OSD选项、存储池、归置组和 CRUSH 选项
一.心跳选项 完成基本配置后就可以部署.运行 Ceph 了.执行 ceph health 或 ceph -s 命令时,监视器会报告 Ceph 存储集群的当前状态.监视器通过让各 OSD 自己报告.并接 ...
- 在VMware中如何清理多余的空间
问题描述 平时用的编程计算机只有250G空间,c盘和d盘,今天准备做实验,发现删除虚拟机中系统的内容不但没有减少空间,反而增加了,这时我意识到虚拟机内部可能与咱们想象的操作模式不一样. 解决办法 我的 ...
- FFMPEG学习----分离视频里的H.264与YUV数据
#include <stdio.h> extern "C" { #include "libavcodec/avcodec.h" #include & ...
- GetWindowRect与GetClientRect 的区别
GetWindowRect 函数功能:该函数返回指定窗口的边框矩形的尺寸.该尺寸以相对于屏幕坐标左上角的屏幕坐标给出. 函数原型:BOOL GetWindowRect(HWND hWnd,LPRECT ...
- AI: 字体设计中的贝塞尔曲线
http://www.xueui.cn/tutorials/illustrator-tutorials/designers-must-know-the-secret-of-the-bezier-cur ...
- socket实现文件上传（客户端向服务器端上传照片示例）
本示例在对socket有了基本了解之后,可以实现基本的文件上传.首先先介绍一下目录结构,server_data文件夹是用来存放客户端上传的文件,client_data是模拟客户端文件夹(目的是为了测试 ...
- kendo ui 实现MVVM
MVVM model----view model----model 实现页面和model之间的动态绑定 grid 支持 events source visib ...