IT兄弟连 HTML5教程 CSS3属性特效 遮罩
CSS遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果。遮罩有三个属性可以设置,分别是mask-image、mask-position、mask-repeat。
首先我们需要一个合适的遮罩图片。在ps里操作很简单,制作步骤如下:
1.打开你想要作为遮罩的透明png24的图片
2.选择图层菜单,然后图层样式最后是颜色叠加
3.在颜色叠加对话框里面改变颜色值为白色
4.点击ok关闭对话框
5.选择文件菜单,保存为web,替换旧的图片
执行上面的5个步骤,我们使用ps制成了一个五边形,如下图:
下例是一个简单遮罩的例子,为一个div设置一张背景图,再增加上图的遮罩,代码如下:
该div的遮罩图片为“mask.png”且不重复,遮罩图片的位置在“50% 50%”,在浏览器里的执行结果如图1:
图1 CSS3遮罩
IT兄弟连 HTML5教程 CSS3属性特效 遮罩的更多相关文章
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- IT兄弟连 HTML5教程 CSS3属性特效 小结及习题
本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...
- IT兄弟连 HTML5教程 CSS3属性特效 倒影
在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换3
5 3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换2
3 perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换1
3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1 3D转换属性 3D的转换方法如表2: 表2 3D转换方法 1 transform-style transform- ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换2
3 scale() 方法 通过scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数.缩放scale()函数让元素根据中心原点对对象进行缩放.默认值是1,因此0.01 ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
随机推荐
- Matlab交叉验证函数——crossvalind
Generate cross-validation indices 生成交叉验证索引 Syntax语法 Indices = crossvalind('Kfold', N, K) %K折交叉验证 ...
- Dictionary的遍历
Dictionary<string, int> list = new Dictionary<string, int>(); list.Add("d", 1) ...
- ThreadLocal快速了解一下
欢迎点赞阅读,一同学习交流,有疑问请留言 . GitHub上也有开源 JavaHouse 欢迎star 1 引入 在Java8里面,ThreadLocal 是一个泛型类.这个类可以提供线程变量.每个线 ...
- Python-Excel 模块哪家强 #华为云·寻找黑马程序员#
python操作excel 最原始的莫过于两位老牌黄金搭档xlrd xlwt了,针对二者的封装有如下模块: xlutils & xlrd & xlwt 为什么把这三个一起说? 首先,x ...
- luogu P1712 [NOI2016]区间
题目描述 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得存在一个 x,使得对于每一 ...
- CF 526F Max Mex(倍增求LCA+线段树路径合并)
Max Mex 题目地址:https://codeforces.com/contest/1084/problem/F 然后合并时注意分情况讨论: 参考代码: #include<bits/stdc ...
- BZOJ 3112 [Zjoi2013]防守战线
题解:单纯形:转化为对偶问题: 对于最大化 cx,满足约束 Ax<=b ,x>0 对偶问题为 最小化 bx,满足约束 ATx>=c ,x>0 (AT为A的转置) 这一题的内存真 ...
- (全国多校重现赛一)B-Ch's gifts
Mr. Cui is working off-campus and he misses his girl friend very much. After a whole night tossing a ...
- HTTP请求流程你了解了么?
我又回来了,先来波推广,最硬的资源来自公众号:前端美食汇,欢迎大家关注公众号获取最新的技术.提示,文末有福利,最硬的文章会首先发布在公众号上喔 预备知识 前文没有描述到传输和协议直接的层级对应关系,大 ...
- Beego在views中格式化显示时间(int64转string)
最近在使用beego开发系统的过程中,遇到时间转换问题,需求如下: 通过以下函数获取Unix时间戳,后台数据库格式为int64: time.Now().Unix() 效果图: 从数据库获取数据,直接以 ...