Question

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

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

http://criticue-staging.herokuapp.com

图像非常小;我尝试过使用：之前预先加载图片，但似乎不起作用。

这是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;
}

Answer 1

您可以将navbar-inner设置为48px的高度。图片的高度不会改变，您将padding-top和padding-bottom设置为10px。将阻止调整大小。

CSS覆盖图像蒙版在页面加载时闪烁的渐变背景

1 个答案: