我如何才能使Alwasys響應此背景

Question

您好，我建立了一個創建一種油漆飛濺背景的網站。 我用jquery和css動畫制作它，因為飛濺應該從中心開始增大，並且不適用於jquery。 我正在使用jquery啟動動畫並將其刪除。 現在我的問題是，我給位置指定了上下左右的百分比，但是缺點是，如果站點的高度或寬度發生變化，則飛濺的位置不再正確，有人可以解決此問題，以便始終保持背景填充？ 這是我從中獲得此想法的網頁：www.locus-solus.it/en/

下載鏈接： https : //drive.google.com/open?id=0B46vx3bf61vldjVRTTVXQnp4SFU

我希望我足夠清楚。

編輯：

我已經使用了很多媒體查詢來解決它，如果您刪除媒體查詢，您可以看到其他設備上的網頁發生了什么，或者將網頁的高度設置為400，您還會看到它無法填滿整個網頁。

所以也許有人知道這些家伙是如何做到的： http : //www.locus-solus.it/en/

我使用img標簽加載img。

Answer 1

您可以使用background-size: cover為此

//element-selector {
    background-size: cover;
}

如果您使用img標簽加載圖片，則可以添加max-width:100%

//element-selector {
    max-width: 100%;
}

Answer 2

解決方案1如果您使用css背景屬性設置圖像，則您給的網站使用的圖像分別用於移動視圖和桌面視圖，這是通過媒體查詢實現的

HTML：

<div class="page-header"></div>

的CSS

 .page-header {
    background: url('images/normal.png');
    }

    @media (max-width: 767px) {
  .page-header {      
  background: url('images/normal-mobile.png');
  }
}

更新的解決方案2：

如果您使用html image標簽（img）設置圖像，則使用媒體查詢根據設備寬度隱藏圖像

<div class="my-class">
   <img src="image-desktop.jpg" class="hidden-phone">
   <img src="image-mobile.jpg" class="hidden-desktop">
</div>

這是根據設備寬度隱藏的css

.hidden-phone{
     visibility: hidden;
  }
.hidden-desktop{
      visibility: visible;
 }
@media (max-width: 767px) {
   .hidden-phone{
     visibility: visible;
    }
    .hidden-desktop{
      visibility: hidden ;
    }
}

Answer 3

您無法通過CSS獲得全身元素的響應高度，只會發現錯誤的解決方法。

但是，如果您願意，可以使用窗口寬度和窗口高度，並通過javascript在背景上設置它們！

為了盡可能提高響應速度，您也可以在調整窗口大小時執行此操作^^

Answer 4

我在項目中一直使用的方法是制作圖像的兩個版本。 肖像和風景版。 為此，您可以使用photoshop及其裁切和圖像大小調整工具。 並使用此代碼...

HTML：

 <div class="your-class">...</div> 

CSS：

 .your-class { background-size: cover; /* It means 'feat to screen' */ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Force the code to don't repeat the background image */ } @media screen and (orientation:portrait) { .your-class { background-image: url(img/background-portrait.png); /* For portrait screens */ } } @media screen and (orientation:landscape) { .your-class { background-image: url(img/background-landscape.png); /* For landscape screens */ } } 

對於在編輯中標記的站點，...設計者使用多個“ div”和“ img”標記並將它們浮動在頁面中。 您可以使用“絕對定位”和“ z-index”創建類似的內容。