css – sass – compass – 背景漸層

2015-06-08 / JSN / 0 Comments / 792 次瀏覽

例如

@include background(linear-gradient(to bottom right, #f07b7a, #b10912));

可以使用 @include background() 的mixin，會替你翻譯成不同瀏覽器支援的背景喔。例如上面的寫法，就會轉換成

background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #f07b7a), color-stop(100%, #b10912));
background: -moz-linear-gradient(top, #f07b7a, #b10912);
background: -webkit-linear-gradient(top, #f07b7a, #b10912);
background: linear-gradient(to bottom right, #f07b7a, #b10912);

漸層的標準寫法是 linear-gradient(方向, 第一個顏色, 第二個顏色, 第三個顏色…….);

詳細請參考原文

但因為不同瀏覽器的寫法稍有不同，所以需要透過 compass 的 mixin background() 去轉換。他還會自動幫你轉成圖片，提供舊型的瀏覽器使用圖片。

注意的是，如果只有使用 background 屬性如

background: linear-gradient(to bottom right, #f07b7a, #b10912);

那就不會有任何的轉換喔。因為 linear-gradient() 的寫法本身就存在CSS3的規範。所以要讓 linear-gradient() 有自動轉換的話，就需要透過 @include background() 使用喔！