首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  前端开发

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

  •  
  •   binbinyouliiii · 114 天前 · 1119 次点击
    这是一个创建于 114 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    Snipaste_2019-07-01_21-54-16.png

    10 回复  |  直到 2019-07-02 11:19:26 +08:00
        1
    aLazarus   114 天前 via Android
    你看下苹果官网的样式就知道了
        2
    xxx749   114 天前 via Android
    滤镜
        3
    hoyixi   114 天前
    文字 Hello 的父元素添加 CSS:

    background-clip: text
        4
    hoyixi   114 天前
    文字 Hello 的父元素添加 CSS:

    background-clip: text
    color: transparent;
        5
    binbinyouliiii   114 天前
    @hoyixi 我试了一下没用啊。http://jsfiddle.net/e136uc5h/

    @xxx749 有相关代码示例吗?我找的 css 滤镜都是关于背景透明的。
        6
    wsly47   114 天前 via Android   ♥ 2
        7
    lzxgh621   114 天前 via iPhone
    字体是可以设置背景色的呀,你把字体透明,再设置个背景色不就好了。
        8
    Biwood   114 天前 via Android   ♥ 1
        9
    zhuoyan   114 天前   ♥ 1
    图层混合模式
        10
    hoyixi   114 天前
    没验证手机发不了 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>
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3630 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 19ms · UTC 05:22 · PVG 13:22 · LAX 22:22 · JFK 01:22
    ♥ Do have faith in what you're doing.