2

広い面のサファリでブラッシュドメタルエフェクトを使おうとしています。このアイデアはここから来ています：http ：//simurai.com/post/9214147117/css3-brushed-metal

そうは言っても、Safariではグラデーションがオフになっていて、幅が広いほど太い白と黒の線があり、効果が損なわれています。私はグラデーションを微調整しようとしましたが、何度も試みた後、太い線を取り除くことができませんでした。

他のブラウザ（Chromeを含む）でも問題ないようです。私の知る限り、この問題はSafariでのみ発生します。

便宜上のJSフィドル：http：//jsfiddle.net/Qzdme/2/

関連するCSS：

    /* Setting min-width because problem is only noticeable at larger widths */
    min-width: 900px;           
    background-image:   -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),                    
                        -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),                    
                        -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
                        -webkit-linear-gradient(-90deg, hsl(0,0%,78%)  0%, 
                                                        hsl(0,0%,90%) 47%, 
                                                        hsl(0,0%,78%) 53%,
                                                        hsl(0,0%,70%)100%);

更新：2番目の繰り返し線形グラデーションの明度を上げることで太い黒い線を取り除くことができました：http：//jsfiddle.net/Qzdme/3/ しかし、まだ太い白い線が表示されます...

4

2 に答える 2

4

このフィドルをチェックしてください、 http：//jsfiddle.net/siyakunde/Qzdme/38/

私はそれを与えましたbackground-size

于 2013-01-09T06:05:28.450 に答える
0

グラデーションの繰り返しは、最大％hsl値と新しい0％値の開始の間の遷移ではインテリジェントではありません。次のようなhsl値の最初のセットに段階的に戻ることができます。

div {
  height: 200px;
  min-width: 900px;         
  background-image:     -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%, hsla(0,0%, 100%,0) 9%),                 
            -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%, hsla(0,0%,  0%,0) 6%),                  
            -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%, hsla(0,0%,100%,0) 4%),
            -webkit-linear-gradient(-90deg, hsl(0,0%,78%)  0%, 
                            hsl(0,0%,90%) 47%, 
                            hsl(0,0%,78%) 53%,
                            hsl(0,0%,70%)100%);

}

jsfiddleのバージョンは次のとおりです：http：//jsfiddle.net/Qzdme/35/

これは、スケールアップすると少し滑らかに見えるようです。幸運を！

于 2013-01-08T18:01:52.147 に答える