Question

我正在使用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 ...但暂时这样做...

谢谢！

Answer 1

尝试将边框放在包裹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缩放到图像的大小。

使边框图像重叠主图像

1 个答案: