在頁面加載時閃爍的漸變背景上的CSS疊加圖像蒙版

我有一個問題，我想在沒有JavaScript預加載的情況下解決。頁面頂部的'jumbotron'或橫幅由背景漸變疊加了alpha蒙版圖像組成。在頁面加載時閃爍的漸變背景上的CSS疊加圖像蒙版

當下面加載頁面時，漸變背景爲第二的圖像加載之前的一小部分可見的（鉻23在OS/X - 與空瀏覽器緩存）：

http://criticue-staging.herokuapp.com

的形象很小;我試過使用：之前預加載圖像，但它似乎並沒有工作。

這裏是爲超大屏幕的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; 
}

來源

2012-11-26 Marcin Bilski

爲什麼不只是將navbar-inner設置爲48px的高度？圖像的高度不會改變，並且您將填充設置爲10px。 –

它會阻止.jumbotron閃爍嗎？對不起，我遠不是一個CSS專業人員...;） –

如果您手動設置高度，高度不會閃爍。當圖像加載時，它只會顯示圖像。沒有調整大小。這是我看到的問題。 –

您可以設置navbar-inner至48像素的高度。圖像的高度不會改變，並且您將padding-top和padding-bottom設置爲10px。將阻止調整大小。

來源

2012-11-27 05:41:52

在頁面加載時閃爍的漸變背景上的CSS疊加圖像蒙版

回答

相關問題