Question

我在CSS中制作了一个background: linear-gradient，它在:: p

Chrome（PC + Mac）
Mozilla（PC + Mac）
Opera（PC + Mac）
Internet Explorer

但是灰色（或白色或其他任何颜色）却呈现黑色。我尝试了“跨浏览器兼容性”建议here，但仍然没有成功。

我该怎么做才能使其在现代Safari（MacOS）上运行？这样linear-gradient会在我的<img>上方变成白色或灰色？

编辑：问题已解决，请查看答案以了解更多详细信息！

Answer 1

我终于用JS代码解决了我的出路，以Safari浏览器为目标，并在找到我的渐变类时添加了一个名为#safari的ID属性：

if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
  {
    jQuery(".container-grey-img-right, .container-grey-img-left, .container-white-img-right, .container-white-img-left").each(function ()
    {
      jQuery(this).attr('id','safari');
    });
  }

然后，我添加仅适用于#safari.container-white-img-left的CSS代码（例如，我为需要的每个类都编写了一个）：

原始渐变如下：

background: -webkit-linear-gradient(left, rgba(0,0,0,0) 30%, rgb(255, 255, 255) 90%);

成为（使用野生动物园）：

background: -webkit-linear-gradient(left, rgba(255,255,255,0) 30%, rgb(255, 255, 255) 90%);

Safari知道它必须是白色透明的，而Chrome和其他人则相反。

注意：我还使用以下JS将其用于IE：

var ua = window.navigator.userAgent;
  var msie = ua.indexOf("MSIE ");

  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
  {
    jQuery(".container-grey-img-right, .container-grey-img-left, .container-white-img-right, .container-white-img-left").each(function ()
    {
      var $container = jQuery(this),
      imgUrl = $container.find("img").prop("src");
      $container.find("img").addClass("featured-image");

      if (imgUrl)
        $container.css("backgroundImage", 'url(' + imgUrl + ')').addClass("custom-object-fit");
    });
  }

和CSS：

    /* Because the gradient doesn't work the same under IE. There is another version specificaly for IE */
.custom-object-fit.container-white-img-left:after {
            content:'';
            position:absolute;
            left:30%; 
            top:0;
            width:70%; 
            height:100%;
            background: -webkit-gradient(linear, right top, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(0,0,0,0))); 
            /* W3C */
            background: -ms-linear-gradient(left, rgba(0,0,0,0) 30%, rgb(255, 255, 255) 90%); 
            /* IE10+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); 
        /* IE6-9 */
        }

 .custom-object-fit {
            position: relative;
            background-size: cover;
            background-position: center center;
        }
        .custom-object-fit .featured-image {
            opacity: 0;
        }

CSS：背景线性渐变在野生动物园中显示黑色

1 个答案: