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;
  }

谢谢，皮尔

Answer 1

我想您的代码中的微小错误是div.claims-main-wrapper { .fa-spinner { @include font-size(40px); position: absolute; margin: 60px auto; left: 50%; } aside { .claims-side-panel { position: fixed; // here I am trying ul { padding-left: 0px; list-style: none; li { .claim-list-item { padding: 14px 28px; background-color: $main-background-color; border-bottom: 1px solid #e0e0e0; line-height: 26px; span { &.label { @include font-size(16px); @include font-style($tertiaryFontFamily, 700); color: $text-color; } p { @include font-size(16px); font-family: $primaryFontFamily; color: $text-color5; margin: -4px 0 0 28px; word-break: break-word; } } } } } } div.alert-section { //padding-top: 2rem; padding-top: 0; .table thead th { border-bottom: 1px solid $border-color; } .table th, .table td { border-top: 0; } }。它将背景设置为不可见。尝试将其删除。 opacity:0;的前缀也是-webkit-。我已附上code pen供参考。

CSS属性background-clip：文本在chrome或safari中对我不起作用

1 个答案: