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 ...
随机推荐
- oracle问题之数据库恢复（三）
可能很多人在做数据库恢复时,都遇到过如下错误: SQL> recover database; ORA: recovery session canceled due to errors ORA: ...
- map实现单词转换程序的例子
代码来源于c++ primer 10.3 功能:已知一个一一对应的词典,求一小段文档对应的“翻译” 词典如下: A a B b C c D d E e 输入: D D E 代码: //需要两个文件,一 ...
- 七、django学习之聚合函数
七.django学习之聚合函数 如何使用 from django.db.models import Avg,Max,Min,Sum models.Book.objects.all().aggregat ...
- RestTemplate远程调用方法
概述: spring框架提供的RestTemplate类可用于在应用中调用rest服务,它简化了与http服务的通信方式,统一了RESTful的标准,封装了http链接, 我们只需要传入url及返回值 ...
- k3s新版本发布！支持Helm3！还有其他重要更新Highlight！
前 言 两个月前,业界应用最为广泛的Kubernetes管理平台创建者Rancher Labs(以下简称Rancher)在KubeCon2019北美峰会上宣布,Rancher打造的轻量级Kuberne ...
- 【Pycharm使用者必看】自定义【光标快速定位到行尾】的按键
1.问题描述 使用Pycharm写代码时,有很多比较方便的快捷键,比如:Shift+Enter快速切换到下一行, 但每次切换到多个括号外或者想移动到行尾,就必须按 End 键或者鼠标点击, 这样操作幅 ...
- 一个"/"引发的惨案
今天行云流水写了一个接口,正想着写完就睡觉了,结果访问的时候一直报错404,找不到路径,我反复检查了好久,确定路径名字没写错,百思不得其解,瞬间有想砸电脑的冲动,于是准备洗洗睡了,明天再搞 洗玩脚回到 ...
- 【C++】随机数引擎
rand() 基本:使用随机数时,经常见到的是C标准库提供的函数rand(),这个函数会生成一个0到RAND_MAX之间的一个整形数: 分布:为了得到一个给定范围内的随机数,通常会对生成的随机数取余: ...
- SPH液面重构过程中的问题
使用粒子方法进行流体特效模拟需要进行液面重构,构造出流体的自由表面,液面重构方法也是一个独立的研究方向,针对其的研究已经有了很多成果,包括液面的平滑度.精度和并行效率等. 在这里,主要是记录一下我在液 ...
- lwip的netif状态管理
netif的状态变化可以设置回调函数, 主要有三项变化, 1 netif up or down,address change,address state change(IPv6) 2 link up ...