奇怪的行爲與邊界圖像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

回答

相關問題