2

JavaScript プリロードなしで解決したい問題があります。ページの上部にある「ジャンボトロン」またはバナーは、アルファ マスクされた画像を重ねた背景のグラデーションで構成されています。

以下のページが読み込まれると、画像が読み込まれる前にグラデーションの背景が一瞬表示されます (OS/X 上の Chrome 23 -- 空のブラウザー キャッシュ):

http://criticue-staging.herokuapp.com

画像はかなり小さいです。:before を使用して画像をプリロードしようとしましたが、うまくいかないようです。

ジャンボトロンの 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

navbar-inner48px の高さに設定できます。画像の高さは変わらず、 と を に設定しpadding-topます。サイズ変更を防ぎます。padding-bottom10px

于 2012-11-27T05:41:52.317 に答える