2

私が本当に気に入っている CSS ストライプとタイルの組み合わせを見つけました。問題は、すべてが非常に遅くなることです。このCSSをより最適化するために使用すべきテクニックはありますか? それとも、テクニック自体が難しすぎるのでしょうか?

私はあまり使用しません。

.head {
    .stripes;
    .angled;
}

.stripes {          
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        background-size: 50px 50px; /* Controls the size of the stripes */

        -moz-box-shadow: 1px 1px 8px gray;
        -webkit-box-shadow: 1px 1px 8px gray;
        box-shadow: 1px 1px 8px gray;
    }

.angled {
        background-color: @light-blue;
        background-image: -webkit-gradient(linear, 0 100%, 100% 0,
                                color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
                                color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
                                to(transparent));
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                            transparent 75%, transparent);
        background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                            transparent 75%, transparent);
        background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                            transparent 75%, transparent);
        background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                            transparent 75%, transparent);
        background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                            transparent 75%, transparent);
    }
4

1 に答える 1

1

数週間前、この手法を Firefox、Opera、および Chrome でテストし、単純な 2 色のグラデーションを使用して縦縞を作成しました。背景サイズが大きい場合は非常にうまく機能しますが、数ピクセルに設定すると、特にウィンドウを最大化するときに、ブラウザーがレンダリングするのにより多くの時間が必要になります。Opera と Chrome はそれをうまく処理します。CPU 使用率グラフにスパイクが見られることがありますが、それほど悪くはありません。一方、FirefoxはCPUに夢中になります。おそらく、グラデーションと背景サイズの実装方法に問題があります。少なくとも今のところ、画像を使用する方が良いと思います。別のリクエストを避けるために、base64 を使用して css に入れることをお勧めします。

于 2012-06-20T13:05:32.960 に答える