使邊框圖像重疊主圖像

我正在使用CSS3 border-image屬性來處理各種尺寸的圖像。我暫時使用內聯css。使邊框圖像重疊主圖像

我想讓它使邊框圖像優先於主圖像，以便如果圖像比預期的稍大一些，框架會出現在圖像的前面。

下面是我的代碼：

<img alt="Thumb_img_0129" src="/thumb_IMG_0129.jpg" 
style='border-width:15px; padding:10px 10px; 
-moz-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
-webkit-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
-o-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
border-image:url("/images/fancy-frame.jpg") 30 30 stretch;' />

我知道這是一個有點笨重正在行的CSS ...但有它這樣暫且...

謝謝！

來源

2012-05-16 user749798

我試過z-postiion和後：相對，但似乎都沒有幫助。主圖像（Thumb_img）似乎部分與邊框重疊...並且我希望邊框具有優先權。 – user749798

嘗試將邊框放在包裝上DIV。例如：

<div style="background-image: url('/thumb_IMG_0129.jpg'); background-repeat: no-repeat;"> 
    <div style='border-width:15px; padding:10px 10px; 
      -moz-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
      -webkit-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
      -o-border-image:url("/images/fancy-frame.jpg") 30 30 stretch; 
      border-image:url("/images/fancy-frame.jpg") 30 30 stretch;'> 

      <img src='/thumb_IMG_0129.jpg' style='opacity: 0;'/> 

     </div> 
</div>

說明：第一次包裝DIV已將圖像作爲背景。在此之上，secon DIV繪製邊框。最後但並非最不重要的是，它們內部的圖像不可見，可自動將DIV縮放到圖像的大小。

來源

2012-05-16 15:12:12

我對此不完全確定。也許需要一些改進。 –

不幸的是，這樣做時，拇指重複，似乎只出現在框架中的一部分。有沒有辦法讓背景圖片不重複，而是延伸到div的大小？ – user749798

編輯源代碼。 –

回答

相關問題