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 ...
随机推荐
- spring实战第二章小记-装配bean
时间:2020/02/06 一.思想 1.创建应用对象之间协作关系的行为通常称为装配,这也是依赖注入(DI)的本质. 对于上面这句话的个人理解:当我们在new一个对象时如果传入了别的对象作为参数(这个 ...
- react脚手架搭建命令 react常用库
react项目一般需要的组件库 react-redux 状态管理库 react-router-dom 路由 sass /less style-compon ...
- Spring Boot入门简介-Maven配置
一.简介 -- 简化Spring应用开发的一个框架: -- 整个Spring技术栈的一个大整合: -- J2EE开发的一站式解决方案. 二.背景: ① J2EE笨重的开发.繁多的配置.低下的开发效率. ...
- Android View如何获取焦点
Android新启动Activity,dialog或者其他窗体中中包含EditText, 新启动的activity的焦点默认在EditText上,这是android系统会弹出软键盘,挤压activit ...
- Java查找数组重复元素，并打印重复元素、重复次数、重复元素位置
面试题查找重复元素并打印重复次数和重复位置,一顿懵逼,回来死磕写下来,打印指定重复次数和最大次数,其他在此基础上可以再更新 package sort; import org.testng.annota ...
- Spring Boot2 系列教程(三十二)Spring Boot 整合 Shiro
在 Spring Boot 中做权限管理,一般来说,主流的方案是 Spring Security ,但是,仅仅从技术角度来说,也可以使用 Shiro. 今天松哥就来和大家聊聊 Spring Boot ...
- API 接口设计规范
概述 这篇文章分享 API 接口设计规范,目的是提供给研发人员做参考. 规范是死的,人是活的,希望自己定的规范,不要被打脸. 路由命名规范 动作 前缀 备注 获取 get get{XXX} 获取 ge ...
- Spring学习笔记:自动创建Proxy
为什么需要自动创建Proxy 手动为所有需要代理的类用ProxyFactoryBean创建代理Proxy需要大量的配置. 这样如果需要代理的类很多,配置就很繁琐,而且也不便于xml配置的维护. 因此S ...
- 推荐算法之因子分解机(FM)
在这篇文章我们将介绍因式分解机模型(FM),为行文方便后文均以FM表示.FM模型结合了支持向量机与因子分解模型的优点,并且能够用了回归.二分类以及排序任务,速度快,是推荐算法中召回与排序的利器.FM算 ...
- css浮动(float)详解
一.什么是浮动? 浮动,顾名思义,就是漂浮的意思.指的是一个元素脱离文档流,悬浮在父元素之上的现象. 二.如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动. rig ...