gpt4 book ai didi

css - Mozilla 上具有多种颜色的线性渐变模糊

转载 作者:行者123 更新时间:2023-12-02 04:33:49 29 4
gpt4 key购买 nike

我希望我的元素具有多种颜色的清晰背景渐变。在 Chrome 上运行良好,但在 Firefox 上过渡时边缘模糊。

这里有一些例子:

火狐:

Firefox

Chrome :

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>

最佳答案

这是一种解决方法,而不是修复方法。

在我的环境中,我实际上在 js fiddle 中观察到相反的结果。在运行 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;}

这是一个 fiddle :

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

关于css - Mozilla 上具有多种颜色的线性渐变模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45882897/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com