剪輯路徑多邊形 - 剪切圖像，但保持原始圖像大小

代碼片段演示我面臨的問題。當使用剪輯路徑：多邊形時，它會剪切圖像/ div但保持原始圖像大小。這意味着空間被冗餘佔用，因爲圖像已被切碎。我想讓我的div直接在.image-poly下面，那裏已經被截斷的圖像仍然存在，但沒有顯示。剪輯路徑多邊形 - 剪切圖像，但保持原始圖像大小

我希望這是有道理的傢伙，這把我難倒了大約30分鐘

.image-poly{ 
 
clip-path: polygon(0 0, 100% 0, 100% 63%, 0 40%);} 
 

 
.text{ 
 
background-color:black; 
 
color:white;}

<div class = "image-poly"> 
 
<img src = "http://www.qygjxz.com/data/out/193/3856596-random-image.png"> 
 
</div> 
 

 
<div class = "text"> 
 
<p>ewfewfewfwefewfwefwef 
 
ewfewfewfwefewfwefwef 
 
ewfewfewfwefewfwefwef 
 
ewfewfewfwefewfwefwef 
 
ewfewfewfwefewfwefwef 
 
</p> 
 
</class>

來源

2017-08-15 J.Doe

你爲什麼不試試現在的位置是：相對的;爲您的文字並將其對齊，無論你想要的 –

正如你已經說了：

當使用夾路徑：多邊形，它削減圖像/格但保持原始圖像大小

所以很遺憾，沒有辦法讓div自動流入「空」空間，因爲沒有空白空間 - 圖像仍然像以前一樣大，只是沒有顯示。

所以，如果你真的想讓你的文字直接在圖像下面，你必須找到另一種解決方案。例如，您可以將圖像重疊在圖像上，以便它看起來像文本直接位於其餘圖像部分的下方。但請記住，這需要您使用position: absolute。下面是一個例子，你如何能做到這一點：

.image-poly{ 
 
    clip-path: polygon(0 0, 100% 0, 100% 63%, 0 40%); 
 
} 
 

 
.text{ 
 
    background-color:black; 
 
    color:white; 
 
    position: absolute; 
 
    top: 190px; 
 
    left: 10px; 
 
}

<div class = "image-poly"> 
 
    <img src = "http://www.qygjxz.com/data/out/193/3856596-random-image.png"> 
 
    </div> 
 

 
    <div class = "text"> 
 
    <p>ewfewfewfwefewfwefwef 
 
    ewfewfewfwefewfwefwef 
 
    ewfewfewfwefewfwefwef 
 
    ewfewfewfwefewfwefwef 
 
    ewfewfewfwefewfwefwef 
 
    </p>

來源

2017-08-15 22:57:18

剪輯路徑多邊形 - 剪切圖像，但保持原始圖像大小

回答

相關問題