IT兄弟连 HTML5教程 CSS3属性特效 遮罩
2024-09-01 20:20:01
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遮罩
最新文章
- php 冒泡 快速 选择 插入算法 四种基本算法
- C#开发系统服务时用的定时器组件
- MVC WebAPI中响应客户端请求返回图片
- iOS原生的搜索:UISearchController
- Android 分享一个SharedPreferences的工具类,方便保存数据
- PE文件格式
- BZOJ 1257 余数之和sum
- Phonegap 3.0 设置APP是否全屏
- 《第一行代码》学习笔记29-内容提供器Content Provider(2)
- jQuery 源码分析和使用心得 - 关于源码
- 使用X264编码yuv格式的视频帧使用ffmpeg解码h264视频帧
- (中等) POJ 2828 Buy Tickets , 逆序+线段树。
- 【规范】前端编码规范——jquery 规范
- BZOJ2809 [Apio2012]dispatching 可并堆
- intellij idea建立maven项目
- solr学习二(ExtractingRequestHandler)
- GCC参数详解 一
- vim 配置半透明
- etcd集群证书安装过程一
- Beta阶段DAY2
热门文章
- java 获取当前年份 月份 日期
- df命令、du命令、磁盘分区 使用介绍
- python_Django
- Python小数据保存,有多少中分类?不妨看看他们的类比与推荐方案...
- 2019CCPC秦皇岛 K MUV LUV UNLIMITED(博弈)
- BZOJ 3108: [cqoi2013]图的逆变换
- Exponial
- Docker系列-(2) 镜像制作与发布
- Python爬虫技术:爬虫时如何知道是否代理ip伪装成功?
- asp.net core 配置微信返回信息接口