CSS002. 字体穿透蒙层（用img设置字体的color）
之前在逛Apple Store时看到了下面的UI：
交互图标非常圆滑上手也很舒服，虽然背景底色本就是白底，但是只依赖css能不能使 “+” 穿透背景看到底色 ？
大致思路如下：
一开始的思路是将内容主体呈现为透明色，再赋予子元素一个 固定宽高 和 box-shadow: 0 0 0 2021px #fff; 父容器 overflow: hidden;
通过足够大的不模糊阴影实现一个假的背景色，内容主体部分仍然为透明，造成一种伪穿透的效果。
但这种方法只限于规则图形，真正应用到字符上还是无法生效。
最终只能回到最原始的方法，将字体颜色调成与背景色一致，达到三个层级伪穿透的效果。
但我一开始想做出的效果就是字符穿透看到渐变色的背景或者图片。似乎与脑中的transparent和overflow没有半毛关系。
于是我找到了这篇文章 CSS题目系列（4） - 文字穿透遮罩层
原来webkit内核提供了方法实现这一效果：
-webkit-text-fill-color: transparent
-webkit-background-clip: text
（ 以下部分来自转载内容 ）
-webkit-text-fill-color: transparent
将文字颜色变成透明，但是经过尝试，发现使用
color：transparent效果也一样，应该是浏览器为向后兼容所拟定的一个新属性，因为如果不支持文字添加背景，但又通过color：transparent将文字变成了透明，文字就显示不出来了。
-webkit-background-clip: text
背景被裁剪为文字的前景色。
代码与最终实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>镂空测试</title>
<style>
*, body, html {
padding: 0;
margin: 0;
overflow: hidden;
}
.container,h1{
background:url("./bgTemp.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.container::after{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container h1 {
position: absolute;
white-space: pre-wrap;
top: 28%;
left: 28%;
width: 100%;
height: 100%;
background-position: -28vw -28vh;
}
.container{
position: relative;
width: 100%;
height: 100vh;
background-position: 0 0;
}
.container::after{
content: '';
background: rgba(0,0,0,0.7);
}
h1{
z-index: 2;
font-size: 180px;
user-select: none;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke: .8px rgba(255, 255, 255, .8);
}
</style>
</head>
<body> <div class="container">
<h1>带恶人97z</h1>
</div> </body>
</html>
- END -
CSS002. 字体穿透蒙层（用img设置字体的color）的更多相关文章
- Qt应用程序中设置字体
Qt应用程序中设置字体 应用程序中经常需要设置字体,例如office软件或者是其他的编辑器软件等等.这里主要涉及到如下几个概念:字体,字号以及风格(例如:粗体,斜体,下划线等等).Qt里面也有对应的类 ...
- 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体
一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...
- intellij idea设置(字体大小、背景)
1. 配置信息说明 Intellij Idea: 2017.2.5 2.具体设置 <1> 设置主题背景.字体大小 File---->Settings----->Appearan ...
- 设置 tableview 的背景颜色,总是有蒙层
1.给tableview添加了背景图片后, cell 总是有一层蒙层蒙着,很阴暗. 2.实验以后才发现背景图片被放在了 cell 的后面.
- iOS开发之实现半透明蒙层背景效果[用于下拉菜单页和分享页]
郝萌主倾心贡献.尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠.支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...
- ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...
- 給eclipse添加字体，设置字体
问题? 一般情况的更换字体就是:1.首先打开Window ---> Preferences ---> General ---> Appearance ---> Colors a ...
- 根据屏幕大小动态设置字体rem
1.根据屏幕大小动态设置字体rem var docEl = document.documentElement, //当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时, //注意现在当浏 ...
- C#设置字体（FontDIalog）、颜色（ColorDialog）对话框控件
设置字体控件为FontDialog,设置颜色的控件为ColorDialog.这两个控件的使用和OpenFileDialog(打开文件)及FolderBroswerDialog(打开文件夹)的使用类似. ...
随机推荐
- SQL遍历日期
IF OBJECT_ID(N'tempdb..#temp', N'U') IS NOT NULL BEGIN DROP TABLE #temp;--临时表删除 END --创建临时表 CREATE T ...
- OpenGL学习笔记（二）画三角形
目录 渲染管线(Graphics Pipeline) 编码实现 顶点数据 顶点缓冲对象(VBO) 顶点着色器 编译着色器 片段着色器 着色器程序 链接顶点属性 顶点数组对象 最终绘制三角形 索引缓冲对 ...
- 2021字节跳动校招秋招算法面试真题解题报告--leetcode206 反转链表，内含7种语言答案
206.反转链表 1.题目描述 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL输出: 5->4->3->2->1-> ...
- maze writeup
maze writeup 攻防世界的一道迷宫题,第一次接触这样的题,个人感觉很有意思,收获也挺多,做一篇笔记记录一下. 程序分析 __int64 sub_4006B0() { signed __int ...
- Java线程基础及多线程的实现
一.进程和线程 1.进程:正在运行的程序 是系统进行资源分配和调用的独立单位 每一个进程都有它自己的内存空间和系统资源 2.线程是进程中的单个顺序控制流,是一条执行路径 ...
- 【笔记】numpy.array基础（2）
numpy数组的基本操作 以几个数组为例 使用ndim可以显示出是几维数组 使用shape可以查看元素维度数 使用size可以查看元素个数 对一维数组进行数据访问 对多维数组进行数据访问 切片访问,使 ...
- SpringBoot开发二十二-统一处理异常
需求介绍 首先服务端分为三层:表现层,业务层,数据层. 请求过来先到表现层,表现层调用业务层,然后业务层调用数据层. 那么数据层出现异常它会抛出异常,那异常肯定是抛给调用者也就是业务层,那么业务层会再 ...
- APP渗透测试之安卓APP抓包
之前说过一些信息搜集相关的东西(漏了APP没讲),按照渗透测试的完整流程,我作为测试,测个APP,也很合理吧 既然能用burpsuite测试web,那就能用burpsuite测试APP(有大佬自称用b ...
- BeautifulSoup4的使用
一.介绍 Beautiful Soup 主要是用来解析提取 HTML 和 XML 文件中的数据. 现在官网推荐使用 Beautiful Soup 4 ,已经被移植到了BS4中. 安装 Beautifu ...
- Python 读写文件的正确方式
当你用 Python 写程序时,不论是简单的脚本,还是复杂的大型项目,其中最常见的操作就是读写文件.不管是简单的文本文件.繁杂的日志文件,还是分析图片等媒体文件中的字节数据,都需要用到 Python ...