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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1972 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

透明

CSS

效果

文字

10 条回复 • 2019-07-02 11:19:26 +08:00

aLazarus

2019-07-01 22:00:20 +08:00 via Android

你看下苹果官网的样式就知道了

xxx749

2019-07-01 22:03:20 +08:00 via Android

滤镜

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 via Android

https://codepen.io/anon/pen/rEdzLx

lzxgh621

2019-07-02 01:53:29 +08:00 via iPhone

字体是可以设置背景色的呀，你把字体透明，再设置个背景色不就好了。

Biwood

2019-07-02 08:16:24 +08:00 via Android

https://css-tricks.com/how-to-do-knockout-text/

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>