通過重複較小的圖像創建圖片框

Question

我已經開始研究一個應用程序，該應用程序使用名爲cropper.js的庫進行圖像處理和圖像裁剪。現在，我負責調查並可能實現一項功能，該功能可以拍攝裁剪後的圖像並創建相框的外觀。

例子：

不同的是，我不能使用已存儲的圖像，但必須建立這種類型的使用一塊圖像的圖像的將是這樣的：

除此之外，我不得不以某種方式將圖像片的一側切成45度角以便能夠重現所需的效果。

怎麼會這樣做呢？我想過在所有四面重複這個圖像片幾次，然後以45度角切割圖像的遠端部分，但不知道如何去做這件事:(

謝謝！

Answer 1

純CSS使用2個圖像，一個垂直，另一個是水平的主框架服用multiple-backgrounds利用最簡單的方式。

至於角落，你只需要一個透明的45一個圖像度切方塊紋理，將用於4格，每一個翻轉通過transform: scale()並定位到兩側使用position: absolute;

.picframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: 
 
    url('http://i.stack.imgur.com/wyp42.png'), /* top */ 
 
    url('http://i.stack.imgur.com/wyp42.png'), /* bottom */ 
 
    url('http://puu.sh/q3NmA/48c4271f4f.jpg'), /* left */ 
 
    url('http://puu.sh/q3NmA/48c4271f4f.jpg'); /* right */ 
 
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; 
 
    background-position: top left, bottom left, top left, top right; 
 
} 
 

 
.picframe [class^="corner"] { 
 
    background: url(http://i.imgur.com/W0Be4ra.png) no-repeat; 
 
    height: 62px; width: 62px; 
 
    position: absolute; 
 
} 
 

 
.picframe .corner-t-l { 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.picframe .corner-t-r { 
 
    top: 0; 
 
    right: 0; 
 
    transform: scale(-1,1); 
 
} 
 

 
.picframe .corner-b-l { 
 
    bottom: 0; 
 
    left: 0; 
 
    transform: scale(1,-1); 
 
} 
 

 
.picframe .corner-b-r { 
 
    bottom: 0; 
 
    right: 0; 
 
    transform: scale(-1,-1); 
 
}

<div class="picframe"> 
 
    <div class="corner-t-l"></div> 
 
    <div class="corner-t-r"></div> 
 
    <div class="corner-b-l"></div> 
 
    <div class="corner-b-r"></div> 
 
</div>

優點：

• 容易實現
• 響應
• 最少的代碼

個缺點：

• 可能不是最準確
• 要求3個的圖像的創建：vertical，horizontal，corner
• 需要幀大小的知識（爲角高度/寬度）

---

如果一個單件紋理是你唯一的選擇，那麼你可以通過使用翻轉背景CSS變換（90度旋轉或鏡像，主框架（頂部，底部，左側，右側）爲負尺度scale(1,-1)）。

轉角有點複雜，可以通過製作一個旋轉45度的div，並在裏面有一個子選項或僞選擇符來完成，然後應用背景，然後在父項中隱藏overflow: hidden邊角集裝箱：

:root { 
 
    --frame-size: 160px; 
 
} 
 

 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
[class^="frame"] { 
 
    background: url("https://i.gyazo.com/6836b6d12cebf4b0fd9a2758ad3a04a9.png"); 
 
    position: absolute; 
 
    /*outline:1px solid rgba(255,0,0,0.5);*/ 
 
} 
 

 
.frame--top, 
 
.frame--bottom { 
 
    width: 100%; 
 
    height: var(--frame-size); 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.frame--bottom { 
 
    top: auto; 
 
    bottom: 0; 
 
    transform: scale(1, -1); 
 
} 
 

 
/* optional shading for realism */ 
 
.frame--top::after, 
 
.frame--bottom::after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: RGBA(0, 0, 0, 0.1); 
 
    box-shadow: inset 0px 10px 50px rgba(0, 0, 0, 0.25); 
 
} 
 

 
.frame--left, 
 
.frame--right { 
 
    height: var(--frame-size); 
 
    width: calc(100vh - (var(--frame-size)*2)); 
 
    z-index: 1; 
 
    bottom: 0; 
 
    left: 0; 
 
    transform-origin: 0% 0%; 
 
    transform: rotate(-90deg); 
 
} 
 

 
.frame--right { 
 
    bottom: var(--frame-size); 
 
    right: var(--frame-size); 
 
    left: auto; 
 
    transform-origin: bottom right; 
 
    transform: rotate(90deg); 
 
} 
 

 
[class^="frame--corner"] { 
 
    height: calc(var(--frame-size)* 1); 
 
    width: calc(var(--frame-size) * 1.425); 
 
    background: inherit; 
 
    overflow: hidden; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 1; 
 
    transform: rotate(45deg); 
 
    transform-origin: 0 0; 
 
} 
 

 
[class^="frame--corner"]::before { 
 
    content: ''; 
 
    position: absolute; 
 
    background: inherit; 
 
    height: 100%; 
 
    width: 100%; 
 
    transform: rotate(-135deg); 
 
    right: 0; 
 
    top: -50%; 
 
} 
 

 
.frame--corner--tr, 
 
.frame--corner--br { 
 
    right: 0; 
 
    left: auto; 
 
    transform: rotate(-45deg); 
 
    transform-origin: 100% 0%; 
 
} 
 

 
.frame--corner--tr::before, 
 
.frame--corner--br::before { 
 
    transform: rotate(135deg); 
 
}

<div class="frame--top"> 
 
    <div class="frame--corner--tl"></div> 
 
    <div class="frame--corner--tr"></div> 
 
</div> 
 
<div class="frame--bottom"> 
 
    <div class="frame--corner--bl"></div> 
 
    <div class="frame--corner--br"></div> 
 
</div> 
 
<div class="frame--left"></div> 
 
<div class="frame--right"></div>

的jsfiddle：https://jsfiddle.net/azizn/cb7feu5p/2/

個優點：

• 單圖像（紋理）
• 響應
• 幀大小可以是動態的

缺點：

• 可能不是最準確
• L的代碼和8 HTML標籤arger量

對於這項工作爲純CSS，許多計算使用一個CSS變量（--frame-size），請務必檢查CSS變量，轉換和calc()表達瀏覽器的兼容性。否則，您將需要通過JavaScript運行所有這些操作。

Answer 2

您可以爲此使用border-image屬性，它應該適用於您正在嘗試執行的操作。它將使用圖像的角落作爲角點，並且將拉伸或重複中間的內容。您也可以像平常一樣爲每個邊框定義邊框寬度。

這種方法的優點是它的工作原理與任何常規邊界一樣，因此不用擔心縮放或保持內容總是相同的大小，它會根據內容很好地適應。

這是代碼會是什麼樣子，不包括完整的瀏覽器支持額外的代碼：

border-image: url("border.png") 27 fill repeat; 

下面是瀏覽器支持一些方便的鏈接&指南：

http://caniuse.com/#search=border-image（我認爲部分支持問題將不過與你的情況無關，只要你用速記）

https://css-tricks.com/understanding-border-image/

這個網站可以很容易地從圖像中定義你的邊框，因爲手動計算它可能有點痛苦： http://border-image.com/