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 上测试了这种技术，使用简单的两种颜色渐变来获得垂直条纹。它适用于大背景尺寸，但是当您将其设置为只有几个像素时，浏览器需要更多时间来渲染它，尤其是在您最大化窗口时。Opera 和 Chrome 处理得很好。有时您会在 cpu 使用图上看到一个峰值，但这还不错。另一方面，Firefox 在 cpu 上发疯了。渐变和背景大小的实现方式很可能是问题。我认为至少现在使用图像会更好。您可能希望使用 base64 并将其放入您的 css 以避免另一个请求。

于 2012-06-20T13:05:32.960 回答