话说文字透明背景不透明的效果用 css 是怎么写的?

2019-07-01 21:56:16 +08:00
 binbinyouliiii

搜了半天都没找到。
类似这种效果

3193 次点击
所在节点    前端开发
10 条回复
aLazarus
2019-07-01 22:00:20 +08:00
你看下苹果官网的样式就知道了
xxx749
2019-07-01 22:03:20 +08:00
滤镜
hoyixi
2019-07-01 22:28:37 +08:00
文字 Hello 的父元素添加 CSS:

background-clip: text
hoyixi
2019-07-01 22:30:21 +08:00
文字 Hello 的父元素添加 CSS:

background-clip: text
color: transparent;
binbinyouliiii
2019-07-01 22:48:45 +08:00
@hoyixi 我试了一下没用啊。http://jsfiddle.net/e136uc5h/

@xxx749 有相关代码示例吗?我找的 css 滤镜都是关于背景透明的。
wsly47
2019-07-02 01:32:40 +08:00
lzxgh621
2019-07-02 01:53:29 +08:00
字体是可以设置背景色的呀,你把字体透明,再设置个背景色不就好了。
Biwood
2019-07-02 08:16:24 +08:00
zhuoyan
2019-07-02 08:48:32 +08:00
图层混合模式
hoyixi
2019-07-02 11:19:26 +08:00
没验证手机发不了 url 链接,所以直接发代码 ,保存为 html 浏览器试试看。(下面代码里背景图有个 url,自己把冒号和点替换成英文字符)
-------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你好骚啊</title>

<style>
.container {
height: 100vh;
width: 100%;

display: flex;
align-items:center;
justify-content:center;
}
.hello {
background-image: url('http 冒号 //t 点 im/hbpu');
background-size: 100% 100%;
background-position: center;

font-size: 250px;
text-align: center;
line-height: 200%;

-webkit-background-clip: text;
background-clip: text;

color: transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="hello">
你好骚啊
</div>
</div>
</body>
</html>

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/579103

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX