複雜的圖像邊框，可以這樣做嗎？

-3

我們在photoshop中設計了一個網站，現在我試圖將設計轉換爲Wordpress模板。除了一件事外，這一切都很順利。我不知道如何爲我的圖像創建這種邊框。這可以通過使用CSS/jQuery技巧來完成嗎？我們在圖像上創建了一個邊框。我附上了一張圖片作爲例子。複雜的圖像邊框，可以這樣做嗎？

圖像周圍的背景具有不同的顏色。

來源

2015-12-21 Wouter

css可以做很多事情，但它不是photoshop ... –

是否有任何理由不能讓邊框成爲圖像文件本身的一部分？ – taylorc93

@Marc B當然是的......我知道。但這不是問題。我的客戶需要在CMS中上傳他的照片，並且邊框需要附加到圖像上。因爲我的客戶端沒有photoshop .... – Wouter

您可以使用CSS3邊框圖像屬性是：http://www.w3schools.com/cssref/css3_pr_border-image.asp

這裏是你可能尋找的CSS：

img { 
    /* Set border to 10px, make it transparent 
    in case border-image isn't supported */ 
    border: 10px solid transparent; 

    /* Set the image and make it stretch around 
    the image evenly */ 
    border-image: url(border.png) 50% stretch; 
}

編輯：另一種選擇是疊加在邊境圖片：

#container { 
 
    position: relative; 
 
    width: 360px; 
 
    height: 299px; 
 
} 
 
#container > img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<html> 
 
    <body> 
 
    <div id="container"> 
 
     <img src="http://blog.protectedstatic.com/wp-content/uploads/2007/05/pointers.png" id="content" /> 
 
     <img src="http://www.clipartandgraphics.com/images/borders/bwwaves.gif" id="border" /> 
 
    </div> 
 
    </body> 
 
</html>

來源

2015-12-21 21:36:33 3ocene

如果您需要邊框自動在圖像上應用疊加，您可以將邊框設爲.png並使用div來對它們進行分層。在這裏看到這個例子：http://jsfiddle.net/sqJtr/961/

基本上你有兩個div，主圖像和覆蓋。主要圖像是客戶端會上傳什麼：

#main_image{ 
    width: 100%; 
    height: 100%; 
    background-image: url("https://pbs.twimg.com/profile_images/378800000072921331/ecb6edfa73f25a3857df7991f1466962.jpeg"); 
}

疊加圖像幀PNG文件你自己添加：

#overlay_image{ 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    width: 256px; 
    height: 256px; 
    background-image: url("http://uxrepo.com/static/icon-sets/windows/png32/256/000000/border-inner-256-000000.png"); 
}

這是如何完成這件事只是一個選項。使用這種方法的圖像必須是一個統一的大小，所以這可能無法幫助你得到你正在尋找的結果。

來源

2015-12-21 21:43:43

複雜的圖像邊框，可以這樣做嗎？

回答

相關問題