CSS桌面VS移動保持的背景圖像可見

-1

www.thewhozoo.com

當從屏幕的比1240px以上的寬度看時，它通過側顯示圖像側。屏幕低於1240像素（例如手機）時，它會將圖像顯示在彼此之下。這是通過使用：

@media only screen and (max-width: 1240px) {

這一切工作正常。

但我的問題是與背景圖像：

.top-container { 
    float: left; 
    width: 100%; 
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1)),url('../images/background1.jpg') no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    }

當瀏覽器是足夠寬（例如930px這裏），它顯示：

但隨着較窄的瀏覽器（例如480px）或移動設備，它顯示：

正如您所看到的，在圖像中，背景作品「WORK」在第二個屏幕中被切掉。

問題

是否有可能在CSS中，設置的最小寬度，使字「工作」將始終可見，無論瀏覽器的大小？

，就好像它們是從較遠的觀看頁面這將給較小的瀏覽器的影響（縮小）。

謝謝。

來源

2017-06-13 Richard

我想CSS來'最小width'存在的背景圖像的DIV，雖然我不知道......你嘗試過什麼？ –

@RandomDeveloper不可以，沒有這樣的背景屬性 – LGSon

我們無法解析整個網站，所以請添加一個最小工作代碼片段。 – LGSon

的background-size: cover設置可確保整個元素總是被背景圖像填充。在你的情況下，移動版本顯示圖像的完整高度並將其居中放置，這樣就可以在左側和右側切斷某些東西。如果你將它顯示得更小（這將是必要的，看到整個單詞「工作」），高度也會縮小，圖像不會再填滿窗口。

您可以嘗試使用background-size: contain，它將始終顯示整個圖像，但會根據方向在上下或左側和右側留出空白區域。但結合背景顏色，這可能是你可以忍受的事情。

來源

2017-06-13 22:03:45 Johannes

謝謝。包含'作品。我只需要調整圖像以適應較小的屏幕。 – Richard

嘗試background-size: 100% 100%，或者background-size: 100%

希望這有助於！

來源

2017-06-13 22:01:21 Chesswithsean

你可以做的是使背景圖像的兩個副本，當瀏覽器被調整到最小寬度，你可以使用JavaScript（jQuery的）背景圖像交換由大至小的版本。

或者你可以像樣式的背景：

background-image:url('../images/bg.png'); 
background-repeat:no-repeat; 
background-size:contain; 
background-position:center;

來源

2017-06-13 22:04:14

CSS桌面VS移動保持的背景圖像可見

回答

相關問題