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

Question

我使用bootstrap并想要用一些渐变和透明度来改变导航栏的颜色（参见附图）。我应该使用代码

的图像吗？

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

还是应该将其转换为css并使用纯css？

浏览器如何支持？

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

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

Answer 1

我没有看到任何使用图片的理由。您可以使用支持here查看该表。

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

do {
    try AVAudioSession.sharedInstance().setCategory(AVAudioSessionCategoryPlayAndRecord, withOptions: AVAudioSessionCategoryOptions.DefaultToSpeaker)
   } 
catch {
          print("can't default to speaker ")
      }

Answer 2

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

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);

}

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

更新

性能方面，使用图像而不是css渐变可以更有效地进行渲染。图像的开销是服务器请求，因此您可以在base64中内联它以避免这种情况。

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