前端HTML背景蒙板

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 600px;height: 600px;background: url(img/1.png);border: 3px solid gold;/*背景蒙板*/-webkit-mask-image: url(img/heart.png) ;/*蒙板尺寸*/-webkit-mask-size: 50px;/*蒙板平铺效果*/-webkit-mask-repeat:no-repeat;/*蒙板的位置*/-webkit-mask-position: center;/*也可以裁剪等 参考背景图片属性讲解即可 *//*综合写法 注意 背景图片属性也支持同时放置多张背景图片*/-webkit-mask:top url(img/heart.png),bottom url(img/nike.png);-webkit-mask-size:60px;}</style></head><body><!--背景蒙板蒙板属性的兼容性比较差 只对webkit内核的浏览器有效果1.充当背景蒙板的图片格式必须是png2.设置成蒙板的图片 系统会把原本不透明的得部分变透明 把原本透明的--><div class=""></div></body>
</html>

运行结果：

前端HTML背景蒙板相关推荐

Android Studio:使用Camera拍照(三)为相机增加取景蒙板/浮层
写在前面的话:每一个实例的代码都会附上相应的代码片或者图片,保证代码完整展示在博客中.最重要的是保证例程的完整性!!!方便自己也方便他人~欢迎大家交流讨论~本文为博主原创文章,未经博主允许不得转载. ...
XHTML基础题及答案20道——必刷前端题目(背)
一.题目及答案 1 . XHTML 指的是? EXtra Hyperlinks and Text Markup Language EXtensible HyperText Marking Langua ...
HTML基础题及答案20道——必刷前端题目(背)
一.题目及答案 1 . HTML 指的是? 超文本标记语言(Hyper Text Markup Language) 家庭工具标记语言(Home Tool Markup Language) 超链接和文本 ...
php内嵌网页加载js,javascript 窗口加载蒙板内嵌网页内容_javascript技巧
//初始化导航背景,iframe容器 function fnDaoHangBg() { var h = fnGetHeight(),w = fnGetWidth();//获取背景窗口大小 if(!$( ...
html页面加载蒙版_javascript 窗口加载蒙板内嵌网页内容
//初始化导航背景,iframe容器 function fnDaoHangBg() { var h = fnGetHeight(),w = fnGetWidth();//获取背景窗口大小 if(!$( ...
论文翻译：ViBe+算法（ViBe算法的改进版本）
论文翻译:ViBe+算法(ViBe算法的改进版本) 原文地址: <Background Subtraction: Experiments and Improvements for ViBe> ...
24v开关电源维修技巧_康佳LED液晶彩电KPS+L1900C301电源板原理与维修
康佳液晶彩电采用的KPS+L1900C3-01型电源板,编号为34007728,版本号为35015686集成电路采用FAN7530+FSGM300+FSFR1700组合方案,输出+5.1VSB/4A. ...
前端工程师的技术进阶点在哪里?
前端工程师的技术进阶点在哪里? 单纯讲技术进阶点意义不大,脱离场景都是耍流氓.我举个实际例子,今天的阿里大文娱优土,阿里接管2年,底层替换差不多了,由内容为王慢慢转变为产品技术驱动.这种情况下,前端如 ...
从前端到未来，前端发展闲聊
1. 前情提要毋庸讳言,在我刚工作的时候,前端是还是一个不受重视的岗位.切图狗,写网页的这种侮辱性绰号绑在前端开发身上.我自己体验到的一个很明显的标志是:招聘网站上,前端开发的工资是其他开发工资的9 ...

前端HTML背景蒙板

前端HTML背景蒙板相关推荐

最新文章

热门文章