CSS3_Node2_背景渐变&蒙版&倒影

最新推荐文章于 2022-11-24 13:14:58 发布
最新推荐文章于 2022-11-24 13:14:58 发布
阅读量1.9k 收藏 1
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/express_yourself/article/details/52853475
版权 
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">-->CSS3 背景</span>
    背景原点控制、背景剪切控制、透明背景、渐变背景
-->CSS3 蒙版
    渐变与蒙版、基本蒙版、形状蒙版、渐变蒙版
-->CSS3 倒影
倒影、渐变倒影


一、CSS3 背景

1、背景原点
background-origin ：border-box | padding-box(默认) | content-box 

background-origin是用来决定图片的原始起始位置。
即可以选择背景图片是从内容区域或者内边距或者边框开始显示。


2、背景切割
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%);


4-1、 线性渐变
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-repeat:repeat | repeat-x | repeat-y | no-repeat
-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遮罩层


2、WEB中mask属性特点

形状主要控制的是显示区域

颜色对蒙版没有任何的影响

透明度为显示图像的透明度


2-1关于形状和颜色对于蒙版的影响
 
<!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>




loushumei
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3新属性 蒙版 Mask属性, 剪切文本以及用CSS绘制表格
JUSTIN的博客
08-04 1608
（一）前言 工作中遇到需要实现一个视觉交互师的移动框，内容区域显示的内容，需要随这圆，边缘逐渐淡化，差不多类似如下效果 我尝试过使用渐变，过滤，内阴影都没办法处理，知道后面发现了mask，才得以解决这个问题， 所以现在将基本属性整理下 （二）CSS mask语法 语法： -webkit-mask-image:url(circle.svg); 和background的样式语法是一样的，蒙版的al...
web前端入门到实战：css3实现ps蒙版效果以及动画
软件开发-前端开发-IT
08-16 685
css3越来越强大，使用css也可以做越来越多意想不到的效果。 css3实现了ps的蒙版效果，炫酷叼炸天的技能，必须要分享出来啊！ 实现原理 这个动画，其实也并不复杂。它使用background-clip实现了文字蒙版的效果，然后结合了背景图片的animation实现了如上图所示的文字蒙版动画。 用css3做蒙版效果 常见的有两种，一种是图形的，另一种是文字的。 图形蒙版 这里要使用的到时cli...
css 实现蒙版效果
热门推荐
小利的博客
11-08 4万+
样式：<style> .back {background:url(images/coupon-logo.gif) no-repeat;} .top {height:100px;background-color:#fff;filter:Alpha(Opacity=60);opacity:0.6;} </style>html<div class="back"> <div clas
CSS3蒙版 Mask
独孤九剑
01-20 1万+
  之前mask这个属性用的比较少,对它也并不了解，又一次在前端群里面五一看到人打了一个这样的属性出来，我感觉很陌生，马上去看了，原来真的有这么神奇的属性，蒙版，可以实现很多复杂多样化的遮罩。 语法：   -webkit-mask-image:url(circle.svg); 和background的样式语法是一样的，蒙版的alpha设置为0那后面的图片也不见了，设置为1才是可见。 ...
css3实现ps蒙版效果以及动画，炫酷吊炸天！
clhq71932的博客
12-25 482
css3越来越强大，使用css也可以做越来越多意想不到的效果。 css3实现了ps的蒙版效果，炫酷叼炸天的技能，必须要分享出来啊！ 实现原理 ...
CSS3图片蒙版效果-webkit-mask
qq_43542074的博客
09-07 2424
大家对-webkit-mask这一属性可能不太熟悉，或许有很多人都是第一次见到，没错，这一属性也是还未被众多浏览器所支持的CSS属性，目前支持这一属性的仅有 -webkit-前缀的谷歌 及 safari浏览器，但是相信在不久的未来这一属性将被其他主流浏览器所支持，下面我们来一睹为快。 首先介绍一下它的属性值，可以有两种写法（图片蒙版、渐变蒙版）： 一、图片蒙版 .demo1 { backg...
css3背景，渐变，蒙版
09-07
css3背景，渐变，蒙版背景切割背景原点背景尺寸rgba模式hsl模式线性渐变径向渐变给容器添加蒙版背景在文字区域可见倒影
css3实现蒙版弹幕功能
12-13
CSS mask遮罩属性的历史非常久远了，远到比CSS3 border-radius等属性还要久远，最早是出现在Safari浏览器上的，差不多可以追溯到09年。但是那个时候还是ie的天下，考虑到兼容性，所有没有被推广起来。不过现在，ie...
good_web.rar_CSS ME
09-24
"good_web.rar_CSS ME"这个压缩包文件显然包含了一个已经设计好的网页模板，以PSD（Photoshop Document）格式提供，用户只需更换Logo即可应用于自己的网站。下面将详细介绍CSS及其在网页设计中的应用，以及PSD文件的...
Material_Template_UXUI_主题包_PSD&SKETCH素材下载.zip
12-28
PSD文件通常包含分层的图层、蒙版、效果和文字层，使得设计师可以单独编辑每个元素，而不影响其他部分。Sketch文件则以符号（Symbols）的形式组织设计元素，这些符号可以在整个设计中复用，保持一致性，并且可以方便...
CSS3 mask 遮罩的具体使用方法
11-21
css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。 mask的简写会将 mask-border 设为初始值。使用mask的简写优于其他简写或者各自属性的设置来覆盖。这能保证mask-border也会重新设置为新的效果样式。 mask-image mask-image 通过读取透明度对html元素进行遮罩，黑色代表透明，白色代表不透明，灰色为半透明。适用于所有元素，在SVG中，它作用于包含<defs>元素和所有图形元素的容器。 /* 图片资源 */ -webkit-mask-image: url(mask.png); /* css
【HTML5&CSS3进阶学习01】气泡组件的实现
03-03
气泡组件在实际工作中非常普遍，无论是网页中还是app中，比如：我们这里所谓气泡组件是指列表型气泡组件，这里就其dom实现，css实现，js实现做一个讨论，最后对一些细节点做一些说明，希望对各位有用单由气泡组件来...
特殊形状图片之遮罩蒙版CSS3-Mask效果
03-14 677
前不久做了一个项目，需要一个小效果，就是获取用户头像以心形的形状展现在页面上，开始小五想的实现方式是canvas画图或CSS3的clip（剪切），发现都不理想，和设计稿里的图形美观度相差太大，而且实现起来太麻烦，后来，小五采用了一个CSS3的新增属性完美的解决了这个问题，今天就来和大家分享一下。 首先来解释一下遮罩、蒙版：和PS中的蒙版、Flash中的遮罩层很类似 遮罩：...
css3的新属性遮罩蒙版mask
肖肖肖丽珠的博客
10-18 8074
效果 我们可以看出其实他是有两个图片拼成的。 + 这个是剪切的一个图片让他成蒙版的形状。你也可以用文字来实现。
CSS3为图片增加蒙版
lilingmei000的博客
07-30 8088
HTML代码 青少年口语 //蒙版上的文字 青少年口语 //图片下的标题 CSS代码： .circle-border { background-color: transparent; //背景透明无颜色 } .img-
【前端面试笔记】CSS3篇
你好呀，欢迎你的到来。
03-12 208
1，CSS3新特性 圆角（border-radius） 阴影（box-shadow） 对文字加特效（text-shadow） 线性渐变（gradient） 变换（transform）：rotate，scale，translate，skew//旋转，缩放，定位，倾斜 更多的CSS选择器：多背景设置，色彩模式如RGBA，伪元素::selection，媒体查询，多栏布局，图片边框 2，CSS...
html遮罩效果mask,H5案例分享：特殊形状图片之遮罩蒙版CSS3-Mask效果
weixin_29185167的博客
05-31 1977
特殊形状图片之遮罩蒙版CSS3-Mask效果小五最近做的项目，需要一个小效果，就是获取用户头像以心形的形状展现在页面上，开始小五想的实现方式是canvas画图或CSS3的clip(剪切)，发现都不理想，和设计稿里的图形美观度相差太大，而且实现起来太麻烦，后来，小五采用了一个CSS3的新增属性完美的解决了这个问题，今天就来和大家分享一下。首先来解释一下遮罩、蒙版：和PS中的蒙版、Flash中的遮罩层...
css3中常用的背景，渐变， 遮罩总结
qq_33404590的博客
11-24 563
css3 背景相关
遮罩层渐变css,CSS3蒙版、渐变、背景
weixin_29871897的博客
08-03 870
背景原点background-origin:padding-box;(默认)border-box | padding-box | content-boxbackground-origin是用来决定图片的原始起始位置。它有三个可选值content-box,padding- box,border-box，即可以选择背景图片是从内容区域或者内边距或者边框开始显示background-clip:borde...
css 蒙版渐变
最新发布
05-30
要实现一个 CSS 蒙版渐变，可以使用 CSS3 的 `linear-gradient()` 函数。以下是一个示例代码： ```html <div class="mask"></div> ``` ```css .mask { position: absolute; top: 0; left: 0; width: 100%; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值