Mozilla上的多種顏色的線性漸變是模糊的

我希望我的元素具有多種顏色的尖銳背景漸變。在Chrome上它工作正常，但在Firefox上它在轉換時有模糊的邊緣。Mozilla上的多種顏色的線性漸變是模糊的

這裏是例子：

火狐：

Firefox

鉻：

Chrome

我怎樣才能使其在Firefox工作？

.footer::before { 
 
    display: block; 
 
    content: ""; 
 
    width: 100%; 
 
    height: 11px; 
 
    border-bottom: 1px solid #ffffff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxNi42JSIgc3RvcC1jb2xvcj0iI2ZmZDUwMyIvPjxzdG9wIG9mZnNldD0iMTYuNiUiIHN0b3AtY29sb3I9IiNmMzZmMjEiLz48c3RvcCBvZmZzZXQ9IjMzLjIlIiBzdG9wLWNvbG9yPSIjZjM2ZjIxIi8+PHN0b3Agb2Zmc2V0PSIzMy4yJSIgc3RvcC1jb2xvcj0iI2RhMjEyOCIvPjxzdG9wIG9mZnNldD0iNDkuOCUiIHN0b3AtY29sb3I9IiNkYTIxMjgiLz48c3RvcCBvZmZzZXQ9IjQ5LjglIiBzdG9wLWNvbG9yPSIjMDA5MDY2Ii8+PHN0b3Agb2Zmc2V0PSI2Ni40JSIgc3RvcC1jb2xvcj0iIzAwOTA2NiIvPjxzdG9wIG9mZnNldD0iNjYuNCUiIHN0b3AtY29sb3I9IiNiNTFlODMiLz48c3RvcCBvZmZzZXQ9IjgzLjglIiBzdG9wLWNvbG9yPSIjYjUxZTgzIi8+PHN0b3Agb2Zmc2V0PSI4My44JSIgc3RvcC1jb2xvcj0iIzAwNWE5ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0 0/100% 11px no-repeat; 
 
    background: -moz-linear-gradient(0deg, #ffd503 16.6%,#f36f21 16.6%,#f36f21 33.2%,#da2128 33.2%,#da2128 49.8%,#009066 49.8%,#009066 66.4%,#b51e83 66.4%,#b51e83 83.8%,#005a9e 83.8%) 0 0/100% 11px no-repeat; 
 
    background: -webkit-linear-gradient(0deg, #ffd503 16.6%,#f36f21 16.6%,#f36f21 33.2%,#da2128 33.2%,#da2128 49.8%,#009066 49.8%,#009066 66.4%,#b51e83 66.4%,#b51e83 83.8%,#005a9e 83.8%) 0 0/100% 11px no-repeat; 
 
    background-image: linear-gradient(90deg, #ffd503 16.6%,#f36f21 16.6%,#f36f21 33.2%,#da2128 33.2%,#da2128 49.8%,#009066 49.8%,#009066 66.4%,#b51e83 66.4%,#b51e83 83.8%,#005a9e 83.8%) 0 0/100% 11px no-repeat; 
 
    background-size: 100% 150px, 100% 150px; 
 
}

<div class="footer"></div>

來源

2017-08-25 Nini Baiashvili

這是一種解決方法，而不是修復。

在我的環境中，我實際上在js小提琴中觀察到相反的結果。在運行FF 54.0.1的Mac Sierra上，我獲得了清晰的轉場。但是，在Chrome 60.0.3112.101上，我得到了模糊轉換。所以，結果可能因環境而異。

由於這不應該是一個連續的漸變讓我提出一個不同的解決方案，將在任何瀏覽器呈現清晰。基本上，創建一個容器來容納純色盒，給它一個相對位置，並將你的元素放在容器內的絕對位置。

HTML

<div class="container"> 
<div class="box1"></div> 
<div class="box2"></div> 
<div class="box3"></div> 
<div class="box4"></div> 
<div class="box5"></div> 
<div class="box6"></div> 
<div class="my-element">my element</div> 
</div>

CSS

.container {width:100%;margin:50px 0px 50px 0px;position:relative;left:0px;right:0px;} 
.container div {float:left;height:12px;width:16.6%;} 
.box1 {background-color:#ffd503;} 
.box2 {background-color:#f36f21;} 
.box3 {background-color:#da2128;} 
.box4 {background-color:#009066;} 
.box5 {background-color:#b51e83;} 
.box6 {background-color:#005a9e;} 

.my-element {position:absolute;top:0px;left:0px;}

這裏有一個小提琴：

https://jsfiddle.net/jfeferman/rpfkpyvj/

來源

2017-08-25 17:47:19 jfeferman

Mozilla上的多種顏色的線性漸變是模糊的

回答

相關問題