IE边框图像和背景图像框问题
我有一个带有平铺背景图像和边框图像的Div。边框图像是带有角设计的透明. png，所以边框周围大约有90像素厚。IE在边框内启动背景图像，其中FF、Chrome和Safari在边框的外部边缘启动背景图像。在IE中，这会导致背景颜色（或主体的背景）通过透明. png边框图像显示。我尝试了背景剪辑和位置，让IE从边框外部开始背景图像，但没有运气。
我错过了什么或建议吗？样品现在就直播@样品
#Menu {
background-color: #DBD1AC;
background-image: url(images/texture_paper_tileable.jpg);
background-repeat: repeat;
background-clip: border-box;
background-position:0 0;
margin: auto;
padding: 0;
height: auto;
width: 80%;
border-style: solid;
border-width: 91px 92px 90px;
-moz-border-image: url(images/menuBorderREDpaint.png) 91 92 90 stretch repeat;
-webkit-border-image: url(images/menuBorderREDpaint.png) 91 92 90 stretch repeat;
-o-border-image: url(images/menuBorderREDpaint.png) 91 92 90 stretch repeat;
border-image:url(images/menuBorderREDpaint.png) 91 92 90 fill stretch repeat;
}
父对象将是正文。。。
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
/*background-color: #42413C;*/
/*background-color: #2a1d0d; brown*/
background-color: #DBD1AC;
background-image: url(images/OldWood.jpg);
background-repeat: repeat;
background-position: 0 940px;
margin: 0 auto;
padding: 0;
color: #FFF;
}
共有1个答案
这里有一个变通方法。我已经在另一个div中包装了menu div，并在那里设置了背景图像。然后从菜单div中删除背景图像，以允许它显示其后面的包装div图像。
<!DOCTYPE HTML>
<!DOCTYPE html PUBLIC "" ""><HTML><HEAD><META content="IE=edge"
http-equiv="X-UA-Compatible">
<style>
#Menu {
border-style: solid;
border-width: 91px 92px 90px;
-moz-border-image: url(menuBorderREDpaint.png) 91 92 90 stretch repeat;
-webkit-border-image: url(menuBorderREDpaint.png) 91 92 90 stretch repeat;
-o-border-image: url(menuBorderREDpaint.png) 91 92 90 stretch repeat;
border-image:url(menuBorderREDpaint.png) 91 92 90 fill stretch repeat;
}
#MenuBackground{
background-image: url(texture_paper_tileable.jpg);
background-repeat: repeat;
background-clip: content-box;
background-position: 0 0;
margin: auto;
padding: 0;
height: auto;
width: 80%;
}
</style>
<BODY>
<BR><BR>
<div id="MenuBackground">
<DIV id="Menu">
<BR><BR>
menu
<BR><BR>
</DIV>
</div>
<BR><BR>
</BODY></HTML>
我把文件放在这里，我在chrome和ie11上测试了它。
-
我试着让两个div相邻，它们之间有一个对角线空间。我在stackoverflow上看到过多个关于对角线div的教程，但它们都是通过为带有纯色的div使用两个边框并使用它们创建的对角线来实现的。但我想要图片/背景图像，而不是纯色。甚至可能还有其他内容，比如在对角线下的文本。当使用边框时，这是不可能的，因为边框在div之外。（floatright隐藏溢出或其他内容。） 这里有人能给我一个提示如何实现这
-
我有一个背景图像和它周围的边框，所以我需要把边框放在我的背景图像下，就像它在我的草稿中显示的那样。草稿图像 现在我有这样的东西。我的结果 我如何修复它？ CSS .hero图像{ 位置：相对； 宽度：100%； 左边距：44px； 最大宽度：716px； 高度：626px； 背景图像：url（“/img/hero/hero bg.jpg”） 背景重复：不重复； 背景位置：-150px； 背景剪辑：
-
为了实现丰富多彩的边框效果，在CSS3中，新增了 border-image属性，这个新属性允许指定一幅图像作为元素的边框。该属性的优点是，可以根据一些简单的规则，把一幅图像划分为 9 个单独的部分，浏览器会自动使用合适的部分作为边框的对应部分。 需要注意的是，只有当 border-style属性取值为 none 时，border-image属性才会有效。所以，如果定义的边框图像显示不出来，首先需要
-
我试图用圆角做一个边框。边框内应该是设置边框的组件决定绘制的任何内容，边框外应该“没有”；也就是说，它应该在这些地方绘制父组件的油漆。 我想得到的是： 我得到的是： 看到带有蓝色边框的容器的白色角落。我需要摆脱它们。我正在尝试使用自定义来实现这一点： 当父组件有一个坚实的背景时，这可以很好地工作，但是如果它有一个背景图像，它当然不会。有没有办法获得在上述地方绘制的实际颜色？ 有没有更好的方法来实现
-
问题内容： 是否可以在Internet选项的“高级”选项卡中不启用“打印背景色和图像”的情况下打印背景图像？ 我认为可以使用没有“背景图像”的替代方法…使用div标签和绝对位置可以模拟背景图像的相同效果吗？我也想在页面上重复背景图像。 问题答案： 打印背景图像（在标记中指定为背景图像的那些图像）的能力完全取决于最终用户，您无法从代码中以编程方式控制此功能。Firefox的一个插件提供了JavaSc
-
我要做什么：：我想使用我当前的实现为圆形图像添加一个黑色边框，如何在不使用第三方库的情况下实现这一点 全面转变。JAVA