问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

-webkit-background-clip 在Safari浏览器下不显示

头像
大司空_
    57211

    其他浏览器展示的效果
    图片.png
    Safari浏览器展示的效果
    图片.png
    经过测试后发现问题代码出现在
    图片.png
    原css代码：

    .gradually-color{  
    background-image: -webkit-linear-gradient(bottom,#FFFFFF,#333333); 
    
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; 
}

    请问有没有大神知道如何解决这个问题。如何让Safari浏览器也能展示这个效果，或者换一个方式实现文字渐变，使所有浏览器都能展示同样的效果。

    csshtmlios
    阅读 4.6k
    1 个回答
    得票最新
    头像
    大司空_
      57211
      ✓ 已被采纳

      好吧，经过一上午的调查，发现background-clip必须加-webkit前缀才可以使用，且其属性值为：border-box/padding-box/content-box。是裁剪不同内容的作用，而我所使用的text属性是指裁剪文字以外的内容，加上我后面有图片.png，导致文字为透明颜色，所以显示的自然是背景色。也就是说，通过这三步：设置背景颜色渐变——>裁剪文字以外内容——>设置文字为透明从而造成了文字颜色渐变的效果。而safari浏览器出现文字不显示这个效果就是出在图片.png这个属性值上，因为该属性属于非正式属性，仅有少部分主流浏览器支持，兼容性很差。所以我最后选择了使用另外一种方式实现此渐变效果。
      实现demo:

      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>swiper</title>
        <style>
            .gradually-color{  
                position: absolute;
                top: -500px;
                left: 0;
                height: 500px;
                width: 100%;
                background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff);
            }
        </style>
    </head>
    <body>
        <div>
            testtesttesttesttesttesttesttesttest
            testtesttesttesttesttesttesttesttest
            testtesttesttesttesttesttesttesttest
            testtesttesttesttesttesttesttesttest
            testtesttesttesttesttesttesttesttest
            testtesttesttesttesttesttesttesttest
            testtesttesttesttesttesttesttesttest
            testtesttesttesttesttesttesttesttest
            testtesttesttesttesttesttesttesttest
            testtesttesttesttesttesttesttesttest
        </div>
        <div style="position: relative;">
            <div class="gradually-color"></div>
        </div>
    </body>
</html>

      效果：
      图片.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题