css - CSS 属性 background-clip:text 在 chrome 或 safari 中对我不起作用

Question

我不明白为什么 background-clip 属性在 chrome 和 safari 中不起作用。

我尝试添加前缀 -webkit 但它没有帮助。

该页面位于此处http://pierredebroux.be/charleroi/

代码主要是：

 <div id="laphoto" class="image2">
   <div id="zz">
    <h1>OBSERVER CHARLEROI</h1>
  </div>


     .image2 {
     position: fixed;
        width:100%;
        height: 100%;
        background: url(img/a.jpg) 50% 50%;
        background-size: cover;
        background-clip:text;
        color:transparent;
        opacity: 0;
        filter:blur(2px)
    }

   h1 {
     font-size: 190px;
    line-height: 180px;
  }

谢谢，皮埃尔

标签： csshtml

Answer 1

我猜你代码中的微小错误是opacity:0;. 它将设置背景不可见。尝试删除它。也-webkit-需要前缀background-clip:text;。我附上了一支代码笔以供参考。