如何使響應格背景圖片

HTML：

<section id="first" class="story" data-speed="8" data-type="background"> 
    <div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div> 
</section>

CSS：

#first .smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed;}

來源

2014-02-25 User1038

使用background-size屬性的值爲100% auto來實現您正在查找的內容。

例如，

#first .smashinglogo{ 
    background-size:100% auto; 
}

希望這有助於。

PS：按照上面的代碼，您可以刪除fixed，並添加100% auto實現了輸出。

來源

2014-02-25 06:46:56 Nitesh

對於此答案圖像明顯使用100％區域（太大）。順便說一句感謝您的嘗試 – User1038

這將使您的形象作出相應的響應。如果您發現100％太大，請設置適合您需求的百分比值。然後拉伸它並再次檢查輸出。如果仍然不起作用，請使用'background-size：100％auto;' - @Phoenix – Nitesh

是的，這是行得通的。再次感謝您 – User1038

嘗試增加background-size:cover

.smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed; 
    background-size: cover; 
    height:600px 
}

檢查this tutorial的詳細文章。

來源

2014-02-25 06:44:29 Sowmya

背景圖片消失。 – User1038

@Phoenix檢查更新後的答案 – Sowmya

製作響應式圖片有很多方法。

基本規則是使用值%而不是pixel的值。其次是使用@media queries來定位移動設備和平板電腦。

您也可以使用CSS3的新技術，使圖像響應：

.img-element: {url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

您可以通過點擊此鏈接閱讀更多關於響應圖像。 http://css-tricks.com/which-responsive-images-solution-should-you-use/

來源

2014-02-25 06:52:33

嘗試：

background-size:100% auto;

或

background-size: cover;

來源

2014-02-25 06:56:51 Iraj

代替使用固定

最大寬度：100％;

這將工作。

最終輸出

.smashinglogo { 
    background: url(../images/logo1.png) 50% 100px no-repeat; 
    max-width: 100%; 
}

來源

2014-02-25 11:27:35

我只是一個答案，幫助我沿着相同的路線總結。

.smashinglogo { 
    max-width: 100%; 
background-size:100% auto; 
} 

.smashinglogo { 
    max-width: 100%; 
background-size:cover; 
}

上述兩個代碼都工作得很好。

來源

2015-06-09 23:05:31 Neophile

#first .smashinglogo{ 
background-image: url(../images/logo1.png); 
background-repeat: no-repeat; 
background-size: contain; 
background-position: 50% 50%; 
}

試試這個，它可能適合你。

來源

2016-01-14 11:30:35

如果div背景圖像在堆疊在小設備上時消失（通常寬度小於577px），則添加「min-height：310px;」到你的CSS。

來源

2017-12-20 08:13:12

如何使響應格背景圖片

回答

相關問題