代码之家 › 专栏 › 技术社区 › DavidTaubmann

CSS边框图像负偏移量(无HTML版本)

border-image offset css image jquery

3

DavidTaubmann · 技术社区 · 11 年前

我们希望几乎所有人都能获得这种类型的边界 国际货币基金组织 CMS(wordpress/joomla)网站内容区域内的标签(这就是为什么我们只使用CSS搜索解决方案, 不访问任何父标记 ):

CSS border-image negative offset

第一步很顺利,代码格式如下: http://border-image.com/ (链接应显示所使用的边界图像), 但它创造了一个空间 在图像和实际边界的边缘之间。

CSS border-image normal

我们首先尝试了一些可以完成这项工作的CSS规则,但是:

border-image-outset :它只延伸到外部,而不是内部,有助于背景为纯色的情况
outline-offset :仅适用于轮廓,不影响边框图像
多个背景 :是最近的一个,但边框显示在图像下方,因此需要应用填充。我们预计它将部分覆盖预期的图像(实际上,它是我们迄今为止实现的)。

我们已经发现了许多类似的问题,并尝试使用最适用的答案:

::after :它需要图像具有content=“”,这会使其消失。
jquery查询 $(img).after :我们无法相对于对应的图像定位边界元素,因为它们被精确地插入到图像之后(与之前相同)。我们需要在父标记上设置这个,因为父标记的大小通常与img的大小不同。我们现在正在尝试一些包装。

到目前为止,我们还未能按预期解决问题。

Here's a JSfiddle 在这里,我们使用以上5个选项进行测试,并有足够的材料(整洁的图像、分组和分离的角落、所有提到的代码应用程序等)。

我们真的很感激有人能取得适用于 国际货币基金组织 标签

2 回复 | 直到 11 年前

1

2

C3roe 11 年前

::after 对 img 元素,因为此类伪元素应该作为虚拟元素插入小孩元素,并且图像元素不能有子元素。

但为什么不简单地将图像包装在 span (可以通过jQuery完成),然后应用背景?

.image-border {
    display:inline-block; /* so that it takes up the same space as the image */
    position:relative;
    padding:6px;
    background: url(http://i.imgur.com/0yCz3oA.png) top left,
      url(http://i.imgur.com/fWtyg99.png) top right,
      url(http://i.imgur.com/UcOam5I.png) bottom left,
      url(http://i.imgur.com/pjYWHyM.png) bottom right;
    background-repeat: no-repeat;
}
.image-border img {
    position:relative; /* for z-index to work */
    display:block; /* so that margins can work and there is no underline space reserved */
    margin:-3px; /* drag image âunderâ the borders on each side
                    by half of the border width resp. span padding */
    z-index:-1; /* make image display below the span */
}

http://jsfiddle.net/nfsuxbyL/

2

1

JasonMArcher TWE 11 年前

您需要一个包装器来使用$(img).after,因为边框元素获得父元素的大小(并将角插入到该元素中)。您可以使用此代码和一些css:

$('img').wrap('<div class="IMGwrapper"></div>')
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/0yCz3oA.png" class="TL" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/pjYWHyM.png" class="BR" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/UcOam5I.png" class="BL" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/fWtyg99.png" class="TR" />');

.IMGwrapper {
  display: inline-block;
  position: relative;
  line-height: 0;
}
.IMGwrapper .TL,
.IMGwrapper .TR,
.IMGwrapper .BR,
.IMGwrapper .BL {
  position: absolute;
}
.IMGwrapper .TL {
  top: -3px;
  left: -3px;
}
.IMGwrapper .TR {
  top: -3px;
  right: -3px;
}
.IMGwrapper .BR {
  bottom: -3px;
  right: -3px;
}
.IMGwrapper .BL {
  bottom: -3px;
  left: -3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQuery'd Edges:
<img src="http://i.imgur.com/ZLmYjVc.png" />