如何刪除移動網站的背景圖片？

Question

我的桌面上有一個背景圖片。但是，由於它的大小，它使移動網站變得緩慢並且不成比例。是否可以刪除移動網站的背景圖片或至少使其響應？

Answer 1

下面的代碼是根據的Tim Kadlec改編而成的，該代碼遍歷了有條件地顯示背景圖像的各種場景。

對於您的情況，移動版本設置爲匹配其父元素的寬度。根據您的佈局，您可能需要設置/限制#container所在元素的大小。

如果您選擇在移動設備上隱藏背景圖像，則第一個樣式塊將進入第一個媒體查詢，第二個可以被淘汰。正如所提到的popnoodles，張貼一些代碼可以更容易地提供更具體的解決方案。

<div id="container"></div> 

#container { 
    background-image: url('images/bg.png'); 
} 

@media all and (min-width: 601px) { 
    #container { 
     width:200px; 
     height:75px; 
    } 
} 
@media all and (max-width: 600px) { 
    #container { 
     max-width: 100%; 
     background-size: 100%; 
    } 
} 

Answer 2

您可以使用媒體查詢爲桌面版網站和移動網站指定不同的css規則。

參考，How to use CSS media query to scale background-image to viewing window

使用媒體查詢取決於我們可以設置造型分辨率的屏幕。 參考文獻https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries有關媒體查詢的更多信息。

您也可以參考
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/創建您的網站的移動版本。

Answer 3

實際上隱藏背景圖像here是簡單的CSS：

background-image: none; 

這裏是移動的溶液中，我使用的媒體查詢

HTML

<div class="bgimg" > 

</div> 

外部CSS

/* Show in Large desktops and laptops */ 
@media (min-width: 1200px) { 

.bgimg { 
     background-image: url('../img/your-eternity.jpg'); 
     background-repeat: no-repeat; 
     height: 800px; 
     width: 1000px; 
     background-size:100% auto; 
    } 

} 

/*Hide in Other Small Devices */ 


/* Landscape tablets and medium desktops */ 
@media (min-width: 992px) and (max-width: 1199px) { 

     .bgimg { 
     background-image: none; 
    } 

} 

/* Portrait tablets and small desktops */ 
@media (min-width: 768px) and (max-width: 991px) { 

      .bgimg { 
     background-image: none; 
    } 

} 

/* Landscape phones and portrait tablets */ 
@media (max-width: 767px) { 

      .bgimg { 
     background-image: none; 
    } 

} 

/* Portrait phones and smaller */ 
@media (max-width: 480px) { 

      .bgimg { 
     background-image: none; 
    } 

} 

希望可以幫助別人。