（HTML / CSS）響應式背景框架垂直匹配的標題圖像？
[英](HTML/CSS) Responsive background frame vertically matching header image?
問題描述
我在Dribbble上找到了Outcrowd的一些非常酷的網站圖片集 （示例鏈接， 示例2 ）。
主要思想是在登錄頁面上具有基本（彎曲或成形的）背景圖像，該圖像也作為主要內容的頂部標題出現在容器中。 這種建設的問題是責任 。 我試圖提出一些想法來解決此問題，但是它們並沒有取得很好的效果。
想法1：圖像層
body { margin: 0; background-color: #e7e6ed; } #bg { background-image: url("https://i.imgur.com/lUphGJh.png"); background-repeat: no-repeat; background-size: cover; width: 100%; padding-bottom: 50%; background-position: bottom; position: fixed; top: 0; left: 0; right: 0; z-index: 1; } #page { margin-top: 50px; position: relative; z-index: 10; padding: 0; box-shadow: 0 0 20px black; } header { background-image: url("https://i.imgur.com/NTwuZ1x.png"); background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position: bottom; min-height: 300px; } .white { background-color: white; } /* The width of this would be different by viewports */ .container { margin: 0 auto; width: 80%; }
<body> <div id="bg"></div> <div id="page" class="container"> <header> <!-- Some content here --> Title </header> <section class="white"> <!-- Main content here --> <br><br>Lorem ipsum<br><br>dolor sit amet.<br><br>Lorem ipsum<br> <br>Lorem ipsum<br><br>Lorem ipsum<br><br>Lorem ipsum <br><br> Lorem ipsum<br><br>Lorem ipsum<br><br>Lorem ipsum </section> </div> </body>
在頁面加載時，內線和外線應該匹配，但是似乎無法使此內容與圖像層相關。
想法2：SVG或HTML5畫布我也嘗試過進行一些幾何計算，但可能只適用於javascript才可以。 （或響應式SVG？）上面的代碼如下所示：
<div id="bg"><svg><!-- Paths and calculations --></svg></div>
理念3：根本不可能
可能沒有人這樣做的原因是有原因的...
請注意：實際運作中的網站Outcrowd所制作的框架沒有產品圖片中所示的框架。
如果您對如何完成此操作有任何想法，請回答可能有幫助的所有問題:)謝謝！
1 個解決方案
解決方案1
0 已采納 2018-10-28 04:15:59
有可能，盡管有點麻煩:)
首先，您需要一個共同的參照點（樞軸），在該參照點上都必須錨定兩個歪斜的圖像/區域。 由於寬度是可變的（響應性，並且可能對所有用戶都承擔“責任”;）），因此該點必須位於頁面的某個y位置的中間（我選擇了300px）。
然后，我們需要一個外部容器，該容器將用作一種剪貼蒙版（使用overflow:hidden ），並且需要旋轉一點。 內部容器繞着與外部容器相同的點旋轉（以其自身的x：50％，y：100％旋轉），然后沿相反的方向旋轉以顯示內容平直。 現在將以傾斜的方式切下內部容器中的內容物。 由於旋轉的塊在角落處留有“孔”，因此我們將外部的一個擴大到安全（ width:200%頁面的width:200% ），將內部的一個擴大50% （因為它將覆蓋確切的頁面寬度）。
現在我們需要擴大內部容器以覆蓋左下角的剩余空間。 因此，我們調整height並相應地更改transform-origin的頂部坐標，以將該點保持在樞軸上。
現在我們有了頁面的背景。 對於內容，我們將在.contents div中進行第二個容器組合，但是要調整頂部位置，以解決.contents塊的頂部空白/填充。 最后，我們對.contents設置overflow:hidden和position:relative ，以切斷第二個容器組合的溢出內容。
所以，我們去了！ 現在可以在內部容器中填充所需的圖像或需要的背景。 為了正確定位，我使用了一些transform s和position:fixed / position:absolute與left / top / bottom結合使用，固定了背景背景，並使內容背景能夠與頁面的其余部分一起滾動。
看看我在jsFiddle上制作的工作示例
獎金
如果需要其他形狀，或者僅需要具有透明背景形狀的圖像，則無需旋轉和放大。 您只需使兩個背景容器具有相同的錨點/樞軸（在x = 50％且y =作為bg圖像底部選擇的位置處）和大小相同。 這是通過相對於頁面寬度縮放.contents來完成的，因此您可以過度縮放內容的背景圖像以匹配頁面寬度。
你猜到了！ 有這樣一個工作示例這里
如何在不使用背景的情況下使用HTML和CSS3創建響應式，垂直和水平居中的圖像
[英]How can you create a responsive, vertically and horizontally centered image with HTML and CSS3 without using background
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.