2016-04-25 21 views
0

Linearer Farbverlauf Hintergrund Eigenschaft funktioniert nicht in Safari-Browser.Ich versuchte, mit -webkit-Präfix auch, aber kein Ergebnis. Was ist los mit dir?Linearer Farbverlauf in Safari funktioniert nicht

hier ist der Code:

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

Antwort

0

Versuchen Sie, alle Präfixe für linear-Gradienten:

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%); 
0

Hallo Der lineare Gradient funktioniert gut in Safari, habe ich mit einer anderen Farbe versucht, wie gesagt, versuchen, alle Präfixe zu verwenden:

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 */ 
} 
Verwandte Themen