Question

线性渐变背景属性在safari浏览器中不起作用。我尝试使用-webkit-前缀但没有结果。什么错了？

这是代码：

HTML：

 <header>
    <div class="container">
      <div class="logo">
      <img src="images/logo.png" alt=""/>
      </div>
   </div>
</header>

的CSS：

.container{max-width:1550px;margin:0 auto;border:1px solid red;}
.clear{clear:both;}
header{width:100%;float:left;position:relative;background:linear-gradient(to right,  #e9eae2 0%,#e9eae2 59%,#7acec3 59%,#7acec3 100%);background:-webkit-linear-gradient(to right,#e9eae2 0%,#e9eae2 59%,#e9eae2 59%,#e9eae2 100%);}
.logo{float:left;}

Answer 1

尝试使用线性渐变的所有前缀：

background: -moz-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* FF3.6+ */
background: -webkit-gradient(linear, 0deg, color-stop(0%, #e9eae2), color-stop(59%, #e9eae2), color-stop(59%, #7acec3), color-stop(100%, #7acec3));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* Opera 11.10+ */
background: -ms-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9eae2', endColorstr='#7acec3', GradientType='1'); /* for IE */
background: linear-gradient(90deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);

Answer 2

嗨线性渐变在safari中工作正常，我尝试了一些不同的颜色，如所说尝试使用所有前缀：

header{width:100%;float:left;position:relative;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87e0fd+0,53cbf1+40,05abe0+100;Blue+3D+%23+16 */
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}

safari中的线性渐变不起作用

2 个答案: