问题标签 [border-image]

我被我网站上的边框困住了。我想在垂直菜单的顶部放一张图片，在底部放一张，在中间放一张背景，但这不起作用。

这是我的代码：

我只有中间图像，但没有顶部/底部。火狐给了我：

属性«border-bottom-image»未知。属性«border-top-image»未知。

知道我做错了什么吗？

编辑：这适用于 FF、Chorme 和 Opera，但不适用于 IE9。

当尝试对border-image文本输入字段应用“条纹”时，它会在某些参数下在 Mozilla Firefox 中中断。

看看这个 jsfiddle：http: //jsfiddle.net/sxpL9zw1

如您所见，页面呈现一个简单的文本字段，其周围带有黑色条纹边框。这个小提琴实际上在我尝试过的任何浏览器中都可以正常工作。

但是，当我在主机或本地主机上运行完全相同的标记时，事情变得非常奇怪：http: //test.tonybogdanov.com/border-image-mozilla-issue/

以下是我使用最新的 Mozilla Firefox (35.0) 打开 URL 时看到的内容：

正如您所看到的，左右边框正确渲染，但顶部和底部的边框看起来有点“实心”。我还在 Windows 上的 IE10、Chrome、Opera 和 Safari 中对此进行了测试，除 Firefox 外，它们的边框都显示得很好。

此外，当我增加border-width上述9px问题时，问题消失了，当我删除width属性时也会发生这种情况。

有什么想法可能导致这种情况，或者为什么我不能在 jsfiddle 中重现它？

PS我也通过在Firefox中拖放HTML文件来尝试这个（以排除任何与主机相关的问题），但它仍然失败。这是一个自己尝试的 zip：http: //test.tonybogdanov.com/border-image-mozilla-issue/files.zip

我查看了这个文档，border-image我觉得我理解每个属性值应该做什么，但是在使用数字时，我似乎无法正确理解。

这是我正在处理的内容的简要版本的JSFiddle ：

当我将 , , 的值border-image: slice分别width设置outset为 600、500,600 时，就图像比例而言，它似乎有点接近我想要的值。为了让图像沿着左侧和右侧移动，我必须减少弄乱比例的向内偏移。有人可以向我解释一下我添加或忘记的东西是什么让这个工作无法顺利进行......或者border-image总是这样荒谬的工作？

我有一个带有平铺背景图像和边框图像的 Div。边框图像是带有角设计的透明 .png，因此边框框周围的厚度约为 90 像素。IE 在边框框内启动背景图像，而 FF、Chrome 和 Safari 在边框框外边缘启动背景图像。在 IE 中，这会导致背景颜色（或正文的背景）通过透明的 .png 边框图像显示。我已经尝试过 Background-clip 和 position 让 IE 从边界框外部启动背景图像，但没有成功。

我有什么遗漏或建议吗？立即直播样品@Sample

}

父母将是身体...

}

When making websites, I often use transparent png's (f.i. created with http://www.noisetexturegenerator.com/) to give the design a more material, realistic look.

Now, I'm working on a design which also heavily uses borders, so I wondered if it was possible to add texture the same way. (i.o.w. defining a solid border and overriding it with the png (the png is transparent so it has to adapt to the previously specified solid color))

To my knowledge it can't be done this way with border-image, since browsers then ignore the solid color. (I preferably do not set a border-image with fixed color for this purpose)

The job could also be done using nested div's, but that would be less semantic and I would have to modify some Joomla views.

Additionally, assume I have a 100x100px png (same as for background), how would I have to set it so that it does not resize and keeps proportions or that the border gets some unexpected transitions (like imaginary lines due to misplacing of patterns)

Anyway, has someone else suggestions? (css noisy borders)

使用border-imageCSS 属性时，边框位于div. 有什么办法可以将边框图像放入其中div？

我使用下面的图像（SVG）作为border-image.

在Chrome和Safari中完美运行，但Firefox有不同的渲染。有没有什么办法解决这一问题？

铬和 Safari：

火狐：

和......我的代码：

我有一个使用边框图像的 div。边框宽度为 33 像素，但图像不填充总宽度并且具有透明度。我想要一种背景颜色，可以完全填充我的边框内部。

这是我附带的代码：http: //jsfiddle.net/kvo8zyr7/1/

问题是我在子内容 div 中的所有元素都是不可点击的，因为图层在后面......

是否有任何想法：

• 使元素可点击
• 具有与我的不同解决方案相同的视觉结果，不会使元素不可点击？

在此先感谢您的帮助。

我们希望为 CMS（wordpress/joomla）网站内容区域内的几乎所有img标签获得这种类型的边框（这就是为什么我们正在寻找仅使用 CSS 的解决方案，而不使用任何父标签）：

第一步使用此处的代码形式顺利进行：http: //border-image.com/（链接应显示我们使用的边框图像）， 但它在图像和实际边框的边缘之间创建了一个空间。

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

1. border-image-outset：它只延伸到外部，而不是内部，有助于背景为纯色的情况
2. outline-offset：仅适用于轮廓，不影响边框图像
3. 多个背景：是最近的一个，但边框显示在图像下方，因此需要应用填充。我们期望它按预期部分覆盖图像（事实上，这是我们迄今为止实施的）。

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

1. ::after：它需要图像具有 content="" 消失它。
2. jquery $(img).after：我们不能相对于对应的图像定位边框元素，因为它们精确地插入到图像之后（与之前相同）。我们需要在大多数时候与 img 大小不同的父标签上设置它。我们目前正在尝试一些包装。

到目前为止，我们还没有能够按预期解决问题。

这是一个 JSfiddle，我们在其中使用所有上述 5 个选项进行测试，并且有足够的材料可以工作（整洁的图像、分组和分离的角、所有提到的代码都适用等）。

我们真的很感谢有人能够获得适用于img标签的确切结果。

你好！
您将如何创建一个覆盖所有页面内容而不干扰它的边框图像？

我想我需要使用个人边框图像属性，但这似乎无法应用于下面的内容而不直接影响它。

有没有办法将绝对定位框架的高度设置为内容高度的 100%，或者是否会覆盖并阻碍所有与透明背景的内容交互......
想法？