如何删除移动网站的背景图片? [关闭]

Posted

技术标签:

【中文标题】如何删除移动网站的背景图片? [关闭]【英文标题】:How to remove background image for mobile site? [closed] 【发布时间】:2013-12-24 03:23:33 【问题描述】:

我的桌面网站上有一张背景图片。然而,由于它的大小,它使移动网站变得缓慢且不成比例。是否可以删除移动网站的背景图片或至少使其具有响应性?

【问题讨论】:

没有发布代码,您不太可能得到代码作为答案。您不想从移动设备中删除,而是要为平板电脑/台式机添加,以便从最小向上工作,因此在遇到适用于大于任何值的屏幕尺寸的媒体查询之前,不会设置您的背景。 【参考方案1】:

其实隐藏背景图片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;
    


希望能帮助别人。

【讨论】:

【参考方案2】:

下面的代码改编自 Tim Kadlec 的精彩 blog post,其中介绍了有条件地显示背景图像的各种场景。

对于您的方案,移动版本设置为与其父元素的宽度相匹配。根据您的布局,您可能需要设置/限制 #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%;
    

【讨论】:

【参考方案3】:

您可以使用媒体查询为桌面版网站和移动版网站指定不同的 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/ 来创建您的网站的移动版本。

【讨论】:

以上是关于如何删除移动网站的背景图片? [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 javascript 为移动设备调整网站背景?

移动响应式网站的产品图片

您如何将网站从 localhost 移动到服务器而不进行太多更改? [关闭]

如何使用 Amazon Cognito 作为我的网站(非移动应用程序)的用户身份验证 [关闭]

如何防止桌面网站上的图像在移动设备上加载?

如何通过单击菜单外部来关闭移动菜单