利用mask-image蒙层编写异形头像

需求:后台给了一个规规矩矩的头像,或圆或方,UI要求展示成水滴的形状。正在想到底如何实现的时候,不由自主去翻了鑫神的博客,正好找到了答案,窃喜(·_·)

UI给的形状:

后台给的头像(忽略橙色背景色,我加的...)

最终需要的效果:

PS:被覆盖图像的宽高与目标形状图越接近越好

废话不多说,贴代码:(本栗子截取的是小程序的代码片段,同样适用于普通h5页,只是标签不同而已·.·)

wxml片段:

  <view class="avatar1-box">

<image src="../../images/zhangyixing_120.png" class="avatar1"></image>

</view>

wxss片段:

.avatar1-box {

width: 280px;

height: 337px;

-webkit-mask-image: url(‘../../images/1st-avatar-mask.png‘); //蓝色水滴形状图

mask-image: url(‘../../images/1st-avatar-mask.png‘); //蓝色水滴形状图

-webkit-mask-size: 100% 100%;

mask-image-size: 100% 100%;

}

.avatar1 {

width: 337px;

height: 337px;

}

参考文章:https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/

原文地址:https://www.cnblogs.com/ganmy/p/9379126.html

时间: 2024-11-09 18:27:34

利用mask-image蒙层编写异形头像的相关文章

利用伪元素做蒙层

注意: 1.若该元素为块级元素,则其伪元素的宽高继承自该元素. 2.若想对文字位置调整,可对其设置box-sizing: border-box,再通过padding来调整位置. 3.还可对伪元素设置背景图片,并通过设置background-position为百分数,使背景图片在蒙层内调整位置. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

利用windows系统ftp命令编写的BAT文件上传[转]

利用windows系统ftp命令编写的BAT文件上传[转] 利用windows系统ftp命令编写的BAT文件上传[转] 在开发中往往需要将本地的程序上传到服务器,而且用惯了linux命令的人来说.在windows下就比较麻烦了.为了方便特编写一个BAT程序来帮助需要这样功能的人.如果用其他IDE工具自带的FTP功能也可以,^_^!      命令: todev.bat /index.asp  默认d:\cnweb为网站的根目录.      我的 http://www.lawcar.cn/ htt

Java -- JDBC_利用反射及 JDBC 元数据编写通用的查询方法

先利用 SQL 进行查询,得到结果集: 利用反射创建实体类的对象:创建对象: 获取结果集的列的别名: 再获取结果集的每一列的值, 结合 3 得到一个 Map,键:列的别名,值:列的值: 再利用反射为 2 的对应的属性赋值:属性即为 Map 的键,值即为 Map 的值. 使用 JDBC 驱动程序处理元数据 Java 通过JDBC获得连接以后,得到一个Connection 对象,可以从这个对象获得有关数据库管理系统的各种信息,包括数据库中的各个表,表中的各个列,数据类型,触发器,存储过程等各方面的信

利用div实现遮罩层效果

利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏div</title> <style> html,body { margin:0; height:100%; } #test { width:100%; h

iOS开发之实现半透明蒙层背景效果[用于下拉菜单页和分享页]

郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 如果文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额随意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源码下载:点我传送 游戏官方下载:http://dwz.cn/RwTjl 游戏视频预览:http://dwz.cn/RzHHd 游戏开发博客:http://dwz.cn/RzJzI 游戏源码传送:http://dwz.cn/Nret1 如题,实现如下效果: 背景为半透明的蒙层效果,点击后背景消失. 实现蒙层的思路: 1.初始化UI

利用泛型抽取Dao层,加事务注解问题(java.lang.Class cannot be cast to java.lang.reflect.ParameterizedType)

想利用泛型抽取BaseDao层,简化操作时出现问题: @Transactional这个注解是可以继承的,于是就想写在抽取的BaseDao层上,让实现的类可以不用写@Transactional,就可开启事务. 问题描述: 由于偷懒,没给BaseDao抽接口,代码如下: package com.liang.ssh2.base; import java.lang.reflect.ParameterizedType; import java.util.Collections; import java.u

利用FrameLayout实现遮罩层

利用FrameLayout实现遮罩层,基本原理是动态的加载一个Layout 首先是布局文件 activity_validate_phone.xml? ?根布局采用FramLayout 然后是Activity ?private ImageView infoOperatingIV; private ImageView imageView; private FrameLayout layout; 然后在按钮的监听函数中添加layout 注意 imageView声明的时候: 清除的时候使用layout.

利用Mask将不规则区域保存下来 算法实现

利用Mask将不规则区域保存下来 Point2f pt1, pt2, pt3, pt4; pt1.x = 17; pt1.y = 75; pt2.x = 374; pt2.y = 48; pt3.x = 44; pt3.y = 249; pt4.x = 394; pt4.y = 234; line(img, pt1, pt2, Scalar(0,0,255),1); line(img, pt1, pt3, Scalar(0,0,255),1); line(img, pt2, pt4, Scala

css-dialog样式实现弹框蒙层全屏无需JS计算高度兼容IE7

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>css-dialog</title>  <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> </head><style type="