僅對下邊框使用邊框圖像？我們的CSS似乎在整個div上覆製圖像

我們只想在DIV的底部使用圖像。然而，我們的CSS以某種方式將圖像複製到DIV的主體上，而不是將其放置在底部。僅對下邊框使用邊框圖像？我們的CSS似乎在整個div上覆製圖像

我們做錯了什麼？

我們只需要支持移動Safari。

代碼：

<div></div> 

div { background:gray; 
     width:100px; 
     height:100px; 
     margin-left:20px; 
     -webkit-border-image:url(http://www.panabee.com/images/dumpling/footer_list.png) 0 0 8 0 round 
    }

來源

2012-04-15 Crashalot

方法1：集0寬度（除BOTTOM外）：

border-image:url("http://example.com/image1.png"); 
border-top:0; 
border-left:0; 
border-right:0;

方法2：與style.css文件，創建::AFTER phseudo元素：

.yourDiv::after {height:20px; width:100%; background:url("http://example.com/image1.png");}

來源

2015-05-20 08:46:03

與-webkit-底部邊框圖像嘗試。不要忘記包含非webkit瀏覽器。下面是一個有用的鏈接：http://css-tricks.com/understanding-border-image/

來源

2012-04-15 17:41:41 gabitzish

從您的鏈接：默認行爲應該是放棄圖像的中心部分，並使用border-image-slice屬性上的'fill'關鍵字來保留它： 'fill'關鍵字（如果存在），導致邊界圖像的中間部分被保留。（默認情況下，它被丟棄，即被視爲空）。但是當前瀏覽器的行爲是保留中間，並且無法關閉它。因此，如果您不希望元素的內容區域具有背景，則圖像的中心部分必須爲空。 – Stefan 2012-04-15 17:45:34

@gabitzish，-webkit-border-bottom-image沒有爲我們工作...爲你做了嗎？ – Crashalot 2012-04-15 20:43:21

我不知道關於Safari移動，但我殺的撥弄你的CSS的邊框部分，並把這個你DIV下面：

<div></div><img src="http://www.panabee.com/images/dumpling/footer_list.png" style="height:20px;width:100px;margin-left:20px;"/>

它做什麼好像你想要它。 safari移動版是否不支持這樣的內容？

來源

2013-11-01 05:35:18 gNerb

你已經將它定義重複「圓」： http://www.w3schools.com/cssref/css3_pr_border-image-repeat.asp

這裏是你如何定義每個單獨的屬性：

div { background:gray; 
 
     width:100px; 
 
     height:100px; 
 
     margin-left:20px; 
 
     -webkit-border-image:url(http://www.panabee.com/images/dumpling/footer_list.png); 
 
     -webkit-border-image-width: 0 0 8px 0; 
 
     -webkit-border-image-repeat: stretch; 
 
     border-image: url(http://www.panabee.com/images/dumpling/footer_list.png); 
 
     border-image-width: 0 0 8px 0; 
 
     border-image-repeat: stretch; 
 
    }

來源

2015-04-20 20:51:13 Durthar

這不起作用。 – nihiser 2016-09-27 21:43:34

這是用來放邊框圖像在div底部

 <html> 
     <head> 
      <style> 
      .target{ 
     height:100px; 
     width:100px; 
     border-image: url(Images/line.png) 0 0 5 0; 
     border-top: 0px; 
     border-left: 0px; 
     border-right: 0px; 
     border-bottom:8px; 
     } 
     </style> 
     </head> 
     <body> 
     <div class="target"> 

     </div> 
     </body> 
     </html>

來源

2015-11-12 08:12:42 yoga

看看這個jsfiddle.net/ocewa9sm/

#borderimg { 
background: #dfdfdf; 
padding: 15px; 
position: relative;} 

#borderimg:after { 
content: ""; 
border-bottom: 16px solid transparent; 
width: 100%; 
position: absolute; 
left: 0; 
bottom: -16px; 

-webkit-border-image: url(http://www.panabee.com/images/dumpling/footer_list.png); 
-o-border-image: url(http://www.panabee.com/images/dumpling/footer_list.png); 
border-image: url(http://www.panabee.com/images/dumpling/footer_list.png) ; 

border-image-slice: 8; 
border-image-width: 8px; 
border-image-outset: 0; 
border-image-repeat: stretch; 
}

來源

2017-02-20 11:42:29 ceren

還有一種方法..「：在」元素後放置一個「絕對底部背景圖像」..但它沒有給出一個健康的結果..並看看這些鏈接https://css-tricks.com/年曆/屬性/ b/border-image/https://tympanus.net/codrops/css_reference/border-image-slice – ceren 2017-02-20 12:06:02

僅對下邊框使用邊框圖像？我們的CSS似乎在整個div上覆製圖像

回答

相關問題