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

[binbinyouliiii]

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

[aLazarus]

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

[xxx749]

滤镜

[hoyixi]

文字 Hello 的父元素添加 CSS：

background-clip: text

[hoyixi]

文字 Hello 的父元素添加 CSS：

background-clip: text
color: transparent;

[binbinyouliiii]

@hoyixi 我试了一下没用啊。http://jsfiddle.net/e136uc5h/

@xxx749 有相关代码示例吗？我找的 css 滤镜都是关于背景透明的。

[wsly47]

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

[lzxgh621]

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

[Biwood]

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

[zhuoyan]

图层混合模式

[hoyixi]

没验证手机发不了 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>