0

I'm using the CSS3 border-image property to images that will be of various sizes. I'm using in-line css for the time being.

I want to make it so that the border-image has priority over the main image, so that if the image is slightly bigger than anticipated, the frame appears in front of the image.

Below is my code:

<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;' />

I know it's a bit clunky being in-line css...but have it this way for the time being...

Thank you!

4

1 回答 1

0

尝试将边框放在 wrapping 周围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将图像作为背景。在此之上，第二个DIV绘制边界。最后但并非最不重要的一点是，它们内部的图像，但不可见，可以自动将DIVs 缩放到图像的大小。

于 2012-05-16T15:12:12.320 回答