2

我有一个问题想在没有 JavaScript 预加载的情况下解决。页面顶部的“jumbotron”或横幅由覆盖有 alpha 蒙版图像的背景渐变组成。

当下面的页面加载时，渐变背景在图片加载前的几分之一秒内可见（OS/X 上的 Chrome 23 - 浏览器缓存为空）：

http://criticue-staging.herokuapp.com

图像很小；我试过使用 :before 来预加载图像，但它似乎不起作用。

这是 jumbotron 的 CSS：

.jumbotron {
  background: #550074; /* Old browsers */
  background-image: url(/images/jumbotronbg.png),     -moz-linear-gradient(45deg,  #550074 14%, #CC26A7 82%); /* FF3.6+ */
  background-image: url(/images/jumbotronbg.png),     -webkit-gradient(linear, left bottom, right top, color-stop(14%,#550074), color-stop(82%,#CC26A7)); /* Chrome,Safari4+ */
  background-image: url(/images/jumbotronbg.png),  -webkit-linear-gradient(45deg,  #550074 14%,#CC26A7 82%); /* Chrome10+,Safari5.1+ */
  background-image: url(/images/jumbotronbg.png),     -o-linear-gradient(45deg,  #550074 14%,#CC26A7 82%); /* Opera 11.10+ */
  background-image: url(/images/jumbotronbg.png),     -ms-linear-gradient(45deg,  #550074 14%,#CC26A7 82%); /* IE10+ */
  background-image: url(/images/jumbotronbg.png),     linear-gradient(45deg,  #550074 14%,#CC26A7 82%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#550074', endColorstr='#CC26A7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

有什么可以做的，最好是没有 JavaScript 预加载？

非常感谢你。

更新：我也尝试嵌入图像，但它没有成功：

这是完整的 CSS：

.jumbotron {
  background-color: #310046;

  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),     
    -moz-linear-gradient(45deg,  #550074 14%, #CC26A7 82%); /* FF3.6+ */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),     
    -webkit-gradient(linear, left bottom, right top, color-stop(14%,#550074), color-stop(82%,#CC26A7)); /* Chrome,Safari4+ */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),  
    -webkit-linear-gradient(45deg,  #550074 14%,#CC26A7 82%); /* Chrome10+,Safari5.1+ */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),     
    -o-linear-gradient(45deg,  #550074 14%,#CC26A7 82%); /* Opera 11.10+ */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),    
    -ms-linear-gradient(45deg,  #550074 14%,#CC26A7 82%); /* IE10+ */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),     
    linear-gradient(45deg,  #550074 14%,#CC26A7 82%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#550074', endColorstr='#CC26A7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  text-align: center;
  position: relative;
  margin: 0;
  padding: 30px 0 40px 0;
  height: 300px;

  -webkit-box-shadow: inset 0px -3px 3px #211;
     -moz-box-shadow: inset 0px -3px 3px #211;
          box-shadow: inset 0px -3px 3px #211;

  margin-bottom: 30px;
}
4

1 回答 1

0

You can set a navbar-inner to a height of 48px. The height of the image won't change, and you set the padding-top and padding-bottom as 10px. Will prevent resizing.

于 2012-11-27T05:41:52.317 回答