2016-04-25 76 views
0

線性漸變背景屬性在safari瀏覽器中不起作用。我試着用-webkit-前綴也嘗試過,但沒有結果。怎麼了?safari中的線性漸變不起作用

這裏是代碼:

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

回答

0

嘗試使用所有前綴爲線性漸變:

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

嗨線性漸變工作正常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 */ 
}