奇怪的行为与边界图像CSS

我有一个图像，我想用div作为边框和背景。尽管使用了background: transparent !important;或background: none !important;（我尝试了两种方法），但下面的代码（和fiddle）会在div内产生不需要的白色背景。奇怪的行为与边界图像CSS

下面是我使用的图像：

enter image description here

这里是我得到的效果：

enter image description here

这是我想要的效果：

enter image description here

奇怪的是，我可以在Chrome中打开Web检查后页面呈现拨动border-image财产达到预期的效果。只需打开border-image关闭并重新，我得到的结果，我想：

enter image description here

HTML

<div>test</div>

CSS

div { 
    -webkit-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Safari 3.1-5 */ 
    -o-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Opera 11-12.1 */ 
    border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; 
}

因此，如果浏览器可以渲染它，我为什么不能写呢？ :)任何帮助/建议都会很棒。

请注意我已经尝试设置图像是div的background-image代替border-image并没有产生预期的结果是（缩放图像，以防止边界从被截断了，因为实在太多猜测工作div的文本内容是动态的）。

来源

2014-10-28 abracassabra

你缺乏fill关键字：在standard说：

中的“填写”关键字，如果存在的话，会导致边界图像的中间部分被保留。（默认情况下它被丢弃，即被视为空。）

请参阅updated fiddle：写30 30 fill似乎解决您的问题。

来源

2014-10-28 17:41:57

非常感谢您的回答以及提醒重新检查规格！ :) – abracassabra 2014-10-28 17:43:47

我知道有时规格可能会吓人，但有时他们解决您的问题:) – 2014-10-28 17:44:28

是否有这样的工作适合你？ http://jsfiddle.net/qazLuyxh/9/

div { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 40px; 
    width: 520px; 
    height: 320px; 
    background: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) no-repeat; 
    color: #FFB9B9; 
    font: bold 24px/41px'fontname', Helvetica, sans-serif !important; 
    background-size: 100%; 
}

来源

2014-10-28 17:34:34

背景图像路线的问题是底部的一些边框被切断。小提琴中的尺寸仅用于演示目的。由于内容物的实际高度将是流体。 – abracassabra 2014-10-28 17:36:56

JSFiddle - Click Here

也许这会帮助你。只需在黑暗中拍摄即可。

#block { 
background-image: url("http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png"); 
height: 100%; 
width: 450px; 
background-repeat: no-repeat; 
} 


#block .blocktext { 
padding: 50px; 
}

来源

2014-10-28 17:48:09 NickyTheWrench

奇怪的行为与边界图像CSS

回答

相关问题