Question

我想在CSS背景图像周围绘制一个边框，它根据容器div中的窗口大小调整自身大小。我可以在div周围绘制边框，但不能在图像周围绘制边框。

这甚至可以在这种设置中完成吗？

我没有在这里发布代码，而是提出了一个有效的例子HERE

<style parse-style>#pimg {
background:#FFF url( {{ img }} ) center center no-repeat;  
background-size: contain;
  height: 100%;
  position:relative;
  -webkit-transition: All 0.3s ease-in-out;;}
</style>

提前致谢。

Answer 1

不，没有办法做到这一点。您可以添加包含图像的第二个div，但之后您将无法使用background-size：contains。

如果您知道图像尺寸不会改变，您可以添加第二个背景图像，以相同的方式定位，这只是一个带有您想要的边框的透明png ......但那真的很傻

Answer 2

很遗憾，我现在没有时间创建一个工作示例，但可能的解决方法可能是使用多个背景：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

第二个背景可能是带有笔划的SVG矩形。为避免因缩放而可能出现的笔划变形，请使用非缩放笔划：https://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

Answer 3

正如shiphape所说，没有办法为BG图像绘制边框，但我有一个可以帮助你的想法。你可以使用2个背景图像，后面的一个可以是一个彩色背景播放边框的角色。请参阅以下代码：

#pimg {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background-image: url({{ bg-image.jpg }}), url({{ 1px.jpg }});
  background-size: 90% 90%, 100% 100%;
  background-repeat: no-repeat, repeat;
  background-position: center center, left top;
}

将所需颜色的1x1px填充图像用作边框并重复。背景大小可以控制边框的宽度。如果增加90％，边框将变薄，如果减小边框，边框将变宽。

在CSS背景图象附近的边界

3 个答案: