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

This topic created in 2532 days ago, the information mentioned may be changed or developed.

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

透明

CSS

效果

文字

10 replies • 2019-07-02 11:19:26 +08:00

aLazarus

Jul 1, 2019 via Android

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

xxx749

Jul 1, 2019 via Android

滤镜

hoyixi

Jul 1, 2019

文字 Hello 的父元素添加 CSS：

background-clip: text

hoyixi

Jul 1, 2019

文字 Hello 的父元素添加 CSS：

background-clip: text
color: transparent;

binbinyouliiii

Jul 1, 2019

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

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

wsly47

Jul 2, 2019 via Android

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

lzxgh621

Jul 2, 2019 via iPhone

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

Biwood

Jul 2, 2019 via Android

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

zhuoyan

Jul 2, 2019

图层混合模式

hoyixi

Jul 2, 2019

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