专栏首页前端资源CSS遮罩应用:带有不规则三角的气泡

CSS遮罩应用:带有不规则三角的气泡

一般网站应用中都会应用到三角形,正三角形的写法也有很多,网上一搜一大把。

今天我看到一个带有不规则三角形气泡的写法,效果如下:

左边部分的矩形比较好实现,通过设置宽高可圆角就可以,但是右边的不规则三角不好用代码实现了。

在这里我们用到一个 CSS 的 遮罩属性(CSS Masks):-webkit-mask-image: url(mask.png);

CSS遮罩是2008年4月由苹果公司添加到webkit引擎中的。

遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果。

实现原理:

类似于Photoshop中的剪切蒙板,图像是由rgb三个通道以及在每个像素上定义的颜色组成的。但是在他们之上还有第四个通道,alpha通道,通过亮度定义每个像素上的透明度。白色意味着不透明,黑色意味着透明,介于黑白之间的灰色表示半透明。实现原理如下图:

代码部分:

说完原理我们来看一下代码:

首先我们在 body 中写一个 p 标签,class 设置为 mask

<body>
    <div class="mask"></div>
</body>

在 style 中给该标签设置背景、宽高和遮罩:

<style>
    .mask {
        background: url(img/pic.jpg) no-repeat center;
        background-size: cover;
        width: 247px;
        height: 305px;
        margin: 50px 10px;
        -webkit-mask-image: url(img/mask.png);
        float: left;
    }
</style>

背景图就是遮罩内展示的图片,遮罩图片就是有黑色图案的图片,这样就可以实现图一的效果了。

GitHub地址:点击访问

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery遮罩(Mask)及弹窗时禁止页面滚动实现

    保险起见可以把 html 和 body 的高度都设置 100% ,如下,用添加 class 的方法实现:

    德顺
  • 群晖NAS Docker注册表下载失败,镜像加速下载方法

    最近想搭建一个为知笔记的私有服务器,在使用 Docker 下载注册表时一直下载失败。

    德顺
  • jQuery实现元素的鼠标移入移出及点击显示隐藏(微信二维码)

    怎么来实现它呢?我们首先写一个简单的页面,实现鼠标移入移除或者点击显示隐藏效果。

    德顺
  • Win Unix Mac 等多种系统平台的宏定义

    最近正在学习C++程序从 Windows 平台向 Unix 平台移植,参考了 qt 的宏定义文件

    阳光岛主
  • 移动端自动化测试框架搭建

      2. 其中公共库中大致有Appium的操作、Excel档的操作、手机信息的配置、测试用例信息的收集、测试结果文件夹的生产 、测试报告的写入、邮件发送等公共方...

    py3study
  • Swift4.0 sorted(by:)函数理解(闭包$理解)

    ZY_FlyWay
  • PCL—低层次视觉—关键点检测(NARF)

    关键点检测本质上来说,并不是一个独立的部分,它往往和特征描述联系在一起,再将特征描述和识别、寻物联系在一起。关键点检测可以说是通往高层次视觉的重要基础。但本章节...

    点云PCL博主
  • 机器学习从零开始系列连载(10)——最优化原理(下)

    SGD相对简单并且被证明有较好的收敛性质和精度,所以自然而然就想到将其扩展到大规模数据集上,就像Hadoop/Spark的基本框架是MapReduce,并行机器...

    lujohn3li
  • kvm 虚拟化安装 Ubuntu 18.04 server

    首先要配置好 KVM 环境,上文已经详细说明,磁盘配置类似的使用 qemu-img create -f qcow2 ubuntu.qcow2 100G 命令创...

    宋天伦
  • 副总理出席CeBIT2015:来自中国的IT“行销”

    再次相约春天。 全球最具影响力的消费电子、信息及通信技术领域的展览会之一CeBIT 2015于3月16至20日在德国汉诺威国际展览中心盛大举行。 德国总理默克...

    人称T客

扫码关注云+社区

领取腾讯云代金券