CSS3_Node2_背景渐变&蒙版&倒影
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">-->CSS3 背景</span>背景原点控制、背景剪切控制、透明背景、渐变背景
-->CSS3 蒙版
渐变与蒙版、基本蒙版、形状蒙版、渐变蒙版
-->CSS3 倒影
倒影、渐变倒影
一、CSS3 背景
background-origin ：border-box | padding-box(默认) | content-box
background-origin是用来决定图片的原始起始位置。
即可以选择背景图片是从内容区域或者内边距或者边框开始显示。
background-clip ：border-box(默认) | padding-box | content-box | text
clip原意为裁剪，截取。
background-clip的作用是将背景图片做适当的裁剪，以适应需要。
剪裁方法：根据设置的盒子部位，那么图片在这个部位的
外边缘以外的部分都会不可见。
background-clip & background-origin
图片起始位置是从border-box开始，但background-clip设置的值是content-box，在content之外，也就是border-box内，padding-box内的图片内容将统统不可见。尽管图片是从边框开始显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景原点&背景切割</title>
<style>
*{margin:0;padding:0;list-style: none;}
h3{
text-align: center;
font-size: 30px;
}
div{
width:1100px;
height:600px;
padding:50px;
border:20px dashed #ccc;
margin:0 auto 50px;
background: url(zxj2.jpeg) 0 0 no-repeat;
}
.box1{
background-origin:border-box;
background-clip: border-box;/* 默认值 */
}
.box2{
background-origin:padding-box;/* 默认值 */
background-clip: padding-box;
}
.box3{
background-origin:content-box;
background-clip:content-box;
}
</style>
</head>
<body>
<h3>border-box</h3>
<div class="box1"></div>
<h3>padding-box</h3>
<div class="box2"></div>
<h3>content-box</h3>
<div class="box3"></div>
</body>
</html>
3、背景尺寸
background-size ：
length： 长度值---第一个值设置宽度，第二个值设置高度 percentage： 百分比---第一个值设置宽度，第二个值设置高度 cover：等比缩放到完全覆盖容器，
背景图像有可能超出容器? contain： 将背景图像等比缩放到
宽度或高度与容器的宽度或高度相
等，背景图像始终被包含在容器内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景尺寸</title>
<style>
*{margin:0;padding:0;list-style: none;}
h3{
text-align: center;
font-size: 30px;
color: #666;
}
div{
width:700px;
height:300px;
border:20px solid #666;
margin:0 auto 50px;
background: url(zxj2.jpeg) 0 0 no-repeat;
}
.box1{
/*length*/
/*background-size:700px 300px;*/
/*percentage*/
background-size:100% 100%;
/*background-size:120% 120%;*/
}
.box2{
/*cover：等比缩放到完全覆盖容器，背景图像有可能超出容器*/
background-size:cover;
}
.box3{
/*contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相
等，背景图像始终被包含在容器内*/
background-size: contain;
}
</style>
</head>
<body>
<h3>background-size :length</h3>
<div class="box1"></div>
<h3>background-size :cover</h3>
<div class="box2"></div>
<h3>background-size :contain</h3>
<div class="box3"></div>
</body>
</html>
4、背景渐变
渐变
background: linear | radial-gradient (起点 , 颜色1 ?百分比%, 颜色2 ?百分比%, ... ,颜色N 100%);
background: linear-gradient(to bottom, red 0%, blue 100%);
background: linear-gradient(to right, red 0%, blue 100%);
4-2、径向渐变
circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
background:radial-gradient(circle at center, rgba(255,255,255,1) 0%,rgba(0,0,0,1) 100%);
background:radial-gradient(circle at 30% 35%, rgba(255,255,255,1) 0%,rgba(0,0,0,1) 100%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景渐变</title>
<style>
*{margin:0;padding:0;list-style: none;}
h3{
text-align: center;
font-size: 30px;
color: #666;
}
div{
float: left;
margin:50px 50px 0 50px;
}
/* 线性渐变：linear-gradient */
.box1{
width:300px;
height:440px;
/* 低版本兼容写法 */
background:-webkit-linear-gradient(to bottom,rgba(95,191,140,1) 0%,rgba(194,208,120,1) 50%,rgba(237,148,104,1) 100%);
/* W3C标准写法 */
background:linear-gradient(to bottom,rgba(95,191,140,1) 0%,rgba(194,208,120,1) 50%,rgba(237,148,104,1) 100%);
}
.box2{
width:440px;
height:240px;
background:linear-gradient(to right,rgba(95,191,140,1) 0%,rgba(194,208,120,1) 50%,rgba(237,148,104,1) 100%);
}
/* 径向渐变 radial-gradient-->circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。*/
.box3{
width:300px;
height:300px;
border-radius: 50%;
background:radial-gradient(circle at center,rgba(255,0,0,1) 0%,rgba(243,166,0,1) 100%);
}
.box4{
width:300px;
height:300px;
border-radius: 50%;
background:radial-gradient(circle at 23% 23%,#fff 0%,#000 100%);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
5、在线调试工具:
http://www.colorzilla.com/gradient-editor/
http://www.internetke.com/jsEffects/2014120803/
http://www.zi-han.net/css3/
用在线调试工具调试背景颜色-->设置文字渐变：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变文字</title>
<style>
.txt{
width:600px;
margin:20px auto;
padding:10px;
border:1px solid #666;
font-size: 30px;
font-weight: bolder;
background: -moz-linear-gradient(left, rgba(234,0,50,0.99) 1%, rgba(247,247,0,0.95) 20%, rgba(73,247,46,0.9) 40%, rgba(71,241,54,0.9) 41%, rgba(32,124,202,0.93) 60%, rgba(162,17,252,0.97) 80%, rgba(255,50,81,1) 100%);
background: -webkit-linear-gradient(left, rgba(234,0,50,0.99) 1%,rgba(247,247,0,0.95) 20%,rgba(73,247,46,0.9) 40%,rgba(71,241,54,0.9) 41%,rgba(32,124,202,0.93) 60%,rgba(162,17,252,0.97) 80%,rgba(255,50,81,1) 100%);
background: linear-gradient(to right, rgba(234,0,50,0.99) 1%,rgba(247,247,0,0.95) 20%,rgba(73,247,46,0.9) 40%,rgba(71,241,54,0.9) 41%,rgba(32,124,202,0.93) 60%,rgba(162,17,252,0.97) 80%,rgba(255,50,81,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcea0032', endColorstr='#ff3251',GradientType=1 );
/*用文字做背景图切割*/
-webkit-background-clip:text;
/* 文字设为透明 */
color:transparent;
}
</style>
</head>
<body>
<div class="txt">的伤口附近可怜的积分少打了快放假了大姐夫可怜的是爱分开都是垃圾费看到类似解放路口的手机覅离开的就是离开房间就打瞌睡了附近可怜的积分少打了快放假了大姐夫可怜的是爱分开都是垃圾费看到类似解放路口的手机覅离开的就是离开房间就打瞌分少打了快放假了大姐夫可怜的是爱分开都是垃圾费看到类似解放路口的手机覅离开的就是离开房间就打瞌睡了附近可怜的积分少打了快放假了大姐夫可怜的是爱分开都是垃圾费看到类似解放路口的手机覅离开的就是离开房间就打瞌</div>
</body>
</html>
二、CSS3 蒙版
1、蒙版知识点语法
/*可以使用图片或渐变作为遮罩层*/
-webkit-mask-image:url | gradient
-webkit-mask-position:x y;
-webkit-mask-clip:border | padding | content
-webkit-mask-origin:border | padding | content?
简写：-webkit-mask:url("04.png") 40px 55px no-repeat;
支持情况：
目前只有webkit浏览器支持mask遮罩层
形状主要控制的是显示区域
颜色对蒙版没有任何的影响透明度为显示图像的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蒙版_形状&颜色</title>
<style>
*{margin:0;padding:0;list-style: none;}
div{
border:1px solid #333;
float: left;
margin:15px;
}
div img{
display: block;
width:300px;
height: 300px;
}
/* 目前只有webkit浏览器支持mask遮罩层 */
.box1 img{
/*分写*/
-webkit-mask-image:url(03.png);
-webkit-mask-repeat:repeat;
-webkit-mask-position:17px 53px;
/*-webkit-mask-position:center center;*/
/*-webkit-mask-position:50% 50%;*/
}
.box2 img{
/* -webkit-mask-image:url(04.png);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:15px 10px; */
/*合写*/
-webkit-mask:url(04.png) 15px 10px no-repeat;
}
.box3 img{
/* -webkit-mask-image:url(05.png);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center center; */
-webkit-mask:url(05.png) center center no-repeat;
}
.box4 img{
/* -webkit-mask-image:url(06.png);
-webkit-mask-repeat:repeat;
-webkit-mask-position:center center; */
-webkit-mask:url(06.png) center center repeat;
}
</style>
</head>
<body>
<div class="box1">
<img src="maskbg.jpg" alt="">
<h2>形状一</h2>
</div>
<div class="box2">
<img src="maskbg.jpg" alt="">
<h2>形状二</h2>
</div>
<div class="box3">
<img src="maskbg.jpg" alt="">
<h2>形状三</h2>
</div>
<div class="box4">
<img src="maskbg.jpg" alt="">
<h2>平铺</h2>
</div>
</body>
</html>
2-2关于形状和颜色对于蒙版的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蒙版_透明度</title>
<style>
*{margin:0;padding:0;list-style: none;}
div{
float: left;
margin:15px 80px;
}
div img{
display: block;
width:400px;
height: 400px;
}
/* 目前只有webkit浏览器支持mask遮罩层 */
.box1 img{
-webkit-mask-image:radial-gradient(circle at center center,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:0 0;
}
.box2 img{
-webkit-mask-image:radial-gradient(circle at center center,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 60%);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:0 0;
}
</style>
</head>
<body>
<div class="box1">
<img src="maskbg.jpg" alt="">
<h2>颜色对蒙版没有任何的影响 </h2>
</div>
<div class="box2">
<img src="maskbg.jpg" alt="">
<h2>透明度为显示图像的透明度</h2>
</div>
</body>
</html>
三、CSS3 倒影
1、倒影
-webkit-box-reflect: left 5px
属性值1：位置
[above , below , left , right]
属性值2：间距 像素值
-webkit-box-reflect: left 5px linear-gradient(to right,rgba(0,0,0,0) 20%,rgba(0,0,0,0.6));
属性值3：渐变
2、渐变中的颜色和透明度对倒影效果的影响
渐变中的颜色对倒影没有影响；
渐变中的透明度影响倒影透明度。
书写文本倒影渐变效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒影</title>
<style>
html,body{background: #000;}
img{
width:500px;
height: 300px;
margin:300px 400px;
/*-webkit-box-reflect:above 0 linear-gradient(to top,rgba(0,0,0,0.02) 0%,rgba(0,0,0,0.8) 60%,rgba(0,0,0,1) 100%);*/
-webkit-box-reflect:right 0 linear-gradient(to top,rgba(0,0,0,0.02) 0%,rgba(0,0,0,0.8) 60%,rgba(0,0,0,1) 100%);
/* -webkit-box-reflect:below 0 linear-gradient(to bottom,rgba(0,0,0,0.02) 0%,rgba(0,0,0,0.8) 60%,rgba(0,0,0,1) 100%); */
/* -webkit-box-reflect:left 10px linear-gradient(to left,rgba(0,0,0,0.02) 0%,rgba(0,0,0,0.8) 60%,rgba(0,0,0,1) 100%); */
/* -webkit-box-reflect:right 10px linear-gradient(to right,rgba(0,0,0,0.02) 0%,rgba(0,0,0,0.8) 60%,rgba(0,0,0,1) 100%); */
}
h2{
font-size: 40px;
color:red;
text-align:center;
margin-bottom: 100px;
-webkit-box-reflect:below 5px linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)
}
</style>
</head>
<body>
<img src="zxj3.jpg" alt="">
<h2>CSS3文字倒影效果</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蒙版_探照灯</title>
<style>
*{margin:0;padding:0;list-style: none;}
html,body{background: #000;}
div{
width:1000px;
height:600px;
margin:30px auto;
}
div img{
width:1000px;
height:600px;
-webkit-mask-image:url(04.png);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:0px 0px;
}
</style>
</head>
<body>
<div>
<img src="mask2_tzd.jpg" alt="">
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
var x=0,y=0,flagx=true,flagy=true;
setInterval(function(){
if (flagx) {
x+=1;
if (x>=740) {
flagx=false;
}
}else{
x-=1;
if (x<=0) {
flagx=true;
}
}
if (flagy) {
y+=1;
if (y>=340) {
flagy=false;
}
}else{
y-=1;
if (y<=0) {
flagy=true;
}
}
$('div img').css('-webkit-mask-position',x+'px '+y+'px');
},1)
</script>
</body>
</html>