在导航栏中使用渐变图像或纯 css？

Question

我使用 bootstrap 并希望通过一些渐变和透明度更改导航栏的颜色（见附图）。我应该使用带有代码

的图像吗

background: url(../img/nav-bg.png) repeat-x;

或者我应该将其转换为 css 并使用纯 css？

浏览器支持如何？

如果是纯粹的 CSS，更改颜色和大小会更容易一些，但我得到了更多的代码以获得相同的结果。

您是否建议使用纯 CSS 或图像作为导航栏的背景颜色？

Answer 1

我建议使用纯 CSS 因为它使您的代码更灵活：将来您可能只需要渐变或透明，因此您将只更改属性而使用背景图像您将更改图像（错误的解决方案）。此外，如果运行您的代码在小屏幕上使用背景图像可能会导致显示问题。对于浏览器支持，您可以在 w3schools

上进行验证

Answer 2

我看不出有任何理由为此使用图片。你可以看到 table 支持 here.

此外，Bootstrap 中导航栏的默认背景是：

background-image: -webkit-linear-gradient(top, #ffffff, 0%, #f8f8f8, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);

Answer 3

我建议你两者都用！

.gradient {
  
  /* Fallback (could use .jpg/.png alternatively) */
  background-color: red;

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background-image: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image:
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image:
    -webkit-linear-gradient(left, red, #f06d06);

  /* Firefox 3.6 - 15 */
  background-image:
    -moz-linear-gradient(left, red, #f06d06);

  /* Opera 11.1 - 12 */
  background-image:
    -o-linear-gradient(left, red, #f06d06);

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image:
    linear-gradient(to right, red, #f06d06);

}

另外内联您的图像而不是将其作为 url（在 css 中使用 base64）这样您将跳过从服务器加载额外资源的开销。

更新

在性能方面，使用 css 渐变图像代替渲染效率更高。图像的开销是服务器请求，因此您可以将其内联到 base64 中以避免这种情况。

对于简单的 css 渐变，差异很小，因此在这种情况下始终建议使用 css。如果您真的希望它在任何地方都能工作，请尝试同时使用两者。如果你想惩罚旧浏览器用户（我推荐）使用背景颜色作为后备。

在导航栏中使用渐变图像或纯 css？

Use gradient image or pure css in navbar?

css

gradient

twitter-bootstrap

更新