剪裁與多個形狀/元素的面具設計

我目前有這個設計作品創建。我最初使用3個獨立的方形div容器來構建它，並且獨立的背景圖片剛剛脫離了設計，但這對我來說是一個很大的僵化（我們需要在每次我們想要改變它時重新創建一個新圖像）以及體積龐大。理想情況下，我想在每個元素容器上使用單個圖像，以便輕鬆更新。這也節省了兩個不必要的服務器請求，我贊成！剪裁與多個形狀/元素的面具設計

只是想輪詢，看看是否有一個更好/更動態的方式來實現這一點。或許用javascript來思考？任何幫助或點在正確的方向將不勝感激。以下是我目前如何構建的概述。附上的是設計模型的片段供參考。

HMTL

<div class="grid-container"> 
    <div class="grid-1 gi" style="background-image:url(image1.jpg);">Facebook</div> 
    <div class="grid-2 gi" style="background-image:url(image2.jpg);">Twitter</div> 
    <div class="grid-3 gi" style="background-image:url(image3.jpg);">Instagram</div> 
</div>

CSS

.gi { 
    background-position: center center; 
    background-size: cover; 
    width: 32.333%; 
} 
.grid-1 { 
    margin-right: 1%; 
} 
.grid-2 { 
    margin: 0 1%; 
} 
.grid-3 { 
    margin-left: 1%; 
}

來源

2016-01-25 Jon Hendershot

這裏的我是如何得到它的jsfiddle設置 https://jsfiddle.net/942g38qv/7/ –

所以，我很愚蠢，並發現了一個簡單而優雅的解決方法！我不是剪裁，而是創建了兩個僞邊框作爲包裝器中的分隔符與所需的背景圖像一起作爲服務器，併爲每個背景添加了適當的背景顏色。解決方案& jsfiddle在下面。

HTML

<div class="social-blocks flex" style="background-image: url(http://localhost:8888/sts-store/wp-content/uploads/2016/01/eric.jpg)"> 

    <div class="social-block auto-ar oneone flex align-center-center block-1" style="height: 381px;"> 
     <div>facebook</div> 
    </div> 
    <div class="pseudo-margin"></div> 
    <div class="social-block auto-ar oneone flex align-center-center block-2" style="height: 381px;"> 
     <div>twitter</div> 
    </div> 
    <div class="pseudo-margin"></div> 
    <div class="social-block auto-ar oneone flex align-center-center block-3" style="height: 381px;"> 
     <div>instagram</div> 
    </div> 
</div>

CSS

.align-center-center { 
    align-items: center; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    -ms-align-items: center; 
    justify-content: center; 
    -ms-justify-content: center; 
    -moz-justify-content: center; 
    -o-justifty-content: center;  
} 
.flex { 
    display: flex; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
} 
.social-block { 
    width: 32.333%; 
    overflow: hidden; 
    position: relative; 
    color: #fff; 
    text-transform: uppercase; 
    font-weight: 600; 
    font-size: 28px; 
    font-style: italic; 
} 
.social-blocks { 
    margin-bottom: 2%; 
    background-position: center bottom; 
    background-size: cover; 
} 
.social-blocks-bg { 
    width: 100%; 
} 
.pseudo-margin { 
    width: 2%; 
    background-color: rgb(247,247,247); 
}

https://jsfiddle.net/942g38qv/8/

來源

2016-01-26 23:54:24

剪裁與多個形狀/元素的面具設計

回答

相關問題