clip的text值设置文字遮罩效果

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/c__dreamer/article/details/82345331

在background-clip中有一个属性值是text。用于让裁剪区域限制于容器中的文本内。可以让背景图呈现在文本区域内,实现用图像填充文本的神奇效果。

有一下几点需要注意:

    1.需要配合webkit的另一个私有属性: -webkit-text-fill-color: 来实现。

    2.仅适用于webkit系内核的浏览器。

这个效果需要使用webkit的写法来描述属性。

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

background-origin和background-clip两者的区别与配合

    1.origin控制的背景图呈现的起始位置(background-position的原点)

    2.clip控制背景图呈现的区域,包括所有背景

    3.二者结合使用可以精确背景图定位或一些特效

div{
	width:100%;
	height:300px;
	margin:200px auto;
	background-image:url(../../image/1.gif);
	border:1px solid red;
	-webkit-text-fill-color:transparent;
	background-size:100% 100%;
		-webkit-background-clip:text; 
	background-clip:text;         /*这种只有火狐可以实现*/
	background-position:left 0px top -110px;
	font-family:all;
	padding-top:30px;
}
.box1 h1 {
	width:900px;
	font-size:70px;
	font-weight:bold;
	text-align:center;
	margin:auto;
}

效果图:

展开阅读全文

设置剪裁区域 Clip

03-21

☆ Java程序员居家旅行必备课程 ☆<br />rn<br />rnJava学习指南系列的第4篇,介绍基于Java Swing的的高级应用技术。本篇的前一篇是Swing入门篇。<br />rnSwing系列教程分为两篇:(1) Swing入门篇 (2) Swing高级篇。<br />rn<br />rn本篇内容至少包含:<br />rn- 高级绘制技术,包含线型、渐变色、文本的精确绘制<br />rn- 不规则形状及图表的绘制<br />rn- 工作线程与界面线程的原理<br />rn- 短任务、长任务、定时任务的应用举例<br />rn- 弹出式窗口 Popup的使用方法<br />rn- 短消息提示 Toaster 的设计与使用<br />rn- 事件处理机制,鼠标键盘事件处理,以及一个基于键盘操作的“推箱子”游戏&nbsp;<br />rn- 多行文本的显示<br />rn- 图片操作:缩放、剪裁、旋转、镜像,以及一个屏幕截图程序的实例<br />rn- 管理型应用界面的框架<br />rn- 向导型应用界面的框架<br />rn- 文档型应用界面的框架<br />rn- 拖放支持 Drag &amp; Drop,一个可拖拽排序的列表,以及一个拼图游戏的实现<br />rn<br />rn* 课程特色 *<br />rn轻快 - 采用小章节教学,学起来轻松<br />rn实用 - 以实际工程需要出发来设计课程<br />rn有趣 - 穿插大量特效实例,增加趣味性和学员的成就感<br />rn专业 - 课程中采用的代码库,就是经过良好封装的成熟的库<br />rn<br />rn本篇穿插多个实例,通过实例,综合运用多种技术,使学员对项目的构建有所有认识。<br />

没有更多推荐了,返回首页