边界图像透明度错误IE11 [英] border-image transparency bug in IE11

问题描述

我使用图片文件设置为边框背景的元素上的 border-image 属性。边框图片文件具有透明度，它在我想在Chrome和Firefox中工作。

但是，在IE11中，透明区域覆盖了边框下的背景图像。有办法解决它吗？我在对各种背景图片的元素使用相同的边框图片，因此我不想为每个元素创建单独的不透明边框图片。

这是我到目前为止：

  body {background：＃000; } div {background-image：url（http://i.stack.imgur.com/7dzt1.jpg）; border-image：url（http://i.stack.imgur.com/Zf544.png）14 round; width：300px; height：80px; border-style：solid; border-width：14px; border-radius：5px;}  

 < div> ; / div>  

呈现比较

border-image file：

背景图片文件：

解决方案

image-width 而不是 border-width 解决了IE11中的问题。如果您要设置后备， border-style：broken 似乎提供更一致的行为。

• 在Chrome中， border- width：14px 每侧添加14px ，并且 border-style 。当设置 border-image-width 时， border-style
  

• 在IE11中， border-width：14px 每边不添加14px ，除非 $ c> border-style 。 border-style 确实影响 border-image 的位置，但仅当设置为 solid




IE11的屏幕截图

  div {background-image：url（http：//i.stack .imgur.com / 7dzt1.jpg）; border-image：url（http://i.stack.imgur.com/Zf544.png）14 round; border-image-width：14px; width：300px; height：80px; border-radius：5px;}  

 < div> ; / div>  

I'm using the border-image property on elements with an image file set as the border background. The border image file has transparency and it works as I want it in Chrome and Firefox.

However, in IE11, the transparent area "overwrites" the background image under the border. Is there a way to fix it? I'm using the same border image on elements with various background images so I'd rather not create separate non-transparent border images for each one.

This is what I have so far:

body {
background: #000;  
}

div {
  background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
  border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;
  width: 300px;
  height: 80px;
  border-style: solid;
  border-width: 14px;
  border-radius: 5px;
}

<div></div>

Rendering comparison

border-image file:

background-image file:

解决方案

Defining a border-image-width instead of border-width solves the issue in IE11. If you want to set a fallback, border-style: dashed seems to offer more consistent behaviour.

This seems like buggy behaviour but is maybe a simple difference in browser behaviour:

• In Chrome, the border-width: 14px adds 14px each side and occurs without a border-style. The border-style has no affect when border-image-width is set.

• In IE11, the border-width: 14px does not add 14px each side unless a border-style is set. The border-style does affect the positioning of the border-image, but only when set to solid.

Screenshot from IE11

Working Example

div {
  background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
  border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;  
  border-image-width: 14px;
  width: 300px;
  height: 80px;
  border-radius: 5px;
}

<div></div>

这篇关于边界图像透明度错误IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！