在網頁設計領域,創建迷人且具有視覺吸引力的視覺效果至關重要。一種流行的技術是用對角線分隔圖像的對稱排列,類似於您在 Reddit 上偶然發現的引人注目的橫幅。
為了實現這種效果,您開始了使用 CSS 的程式設計冒險,但遇到了一些挑戰。您的影像在框框中分佈不均勻,有些甚至溢出了。讓我們深入研究解決這些問題的替代解決方案。
我們將利用背景位置的強大功能來輕鬆居中影像,而不是依賴定位元素。下面的程式碼片段提供了一個簡化但有效的方法:
.container { display: flex; height: 150px; margin: 0 30px; } .box { flex: 1; border: 1px solid; transform: skew(-25deg); position: relative; overflow: hidden; } .box:after { content: ""; position: absolute; top: 0; bottom: 0; left: -50%; right: -50%; transform: skew(25deg); background-image: var(--i); background-position: center; }
應用於此HTML 結構時:
<div class="container"> <div class="box">
結果是一組完美居中且均勻間隔的圖像在傾斜的盒子內,創造出迷人且平衡的視覺效果。
以上是如何使用 CSS 在傾斜的方塊中創建完美居中的圖片?的詳細內容。更多資訊請關注PHP中文網其他相關文章!