2014-10-07 84 views
2

我想使這個漸變在Android上工作,但我不知道正確的CSS選項。Android上的CSS漸變

HTML:

<div class="bottom-logo"> 
    <div id="logo" class="logo-menu-green">blaa</div> 
</div> 

的CSS:

#logo{ 
    font-family: "Lato", "Open Sans"; 
    font-weight: bold; 
    position: absolute; 
    z-index: 999; 
    background: #6699cc; 
    background: -moz-linear-gradient(left, #6699cc 0%, #3399cc 20%, #009999 37%, #009966 52%, #999999 68%, #9933cc 73%, #990099 90%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6699cc), color-stop(20%,#3399cc), color-stop(37%,#009999), color-stop(52%,#009966), color-stop(68%,#999999), color-stop(73%,#9933cc), color-stop(90%,#990099)); 
    background: -webkit-linear-gradient(left, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%); 
    background: -o-linear-gradient(left, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%); 
    background: -ms-linear-gradient(left, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%); 
    background: linear-gradient(to right, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699cc', endColorstr='#990099',GradientType=1); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

我試過,但它不工作。謝謝。

編輯:

解決方案將使用SVG過濾器。

+0

android的版本是什麼? – Anon 2014-10-07 19:57:07

+0

Android 4.2.1 android – 2014-10-07 19:59:26

+0

http://caniuse.com/#search=gradient此版本支持漸變。發佈您的HTML + CSS – Anon 2014-10-07 20:01:08

回答

0

只有解決方案後,我可以想到我的公平分享與Android的問題。

將漸變複製到圖形圖塊中,並僅更改以下內容。

拿下您的密碼並將其導入here

視覺文件

enter image description here

CSS

#logo{ 
 
    font-family: "Lato", "Open Sans"; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    z-index: 999; 
 
    background-image: url(img/thegradient.jpg); 
 
    background-repeat: no-repeat; 
 
}

而且坡度甚至沒有出現,直到我刪除了這兩條線

-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent;

如果這不是你正在尋找的我推薦使用在你的文章的評論中介紹的JavaScript方法。

祝你好運。