用背景圖標分割一個css邊框

我想分割一個帶有背景圖像的邊框。我不知道這是否可以這樣做。希望有人能幫助我找出一個很好的乾淨方法來實現這一點。用背景圖標分割一個css邊框

我試圖讓一個底部和頂部那一個就是我現在所擁有的。

.tinybanner h1 { 
    padding-bottom: 0.5em; 
    margin-bottom: 50px; 
    border-bottom: 1px solid $green; 
    display: inline-block; 
    @include adjust-font-size-to(24px); 
    background: url('images/tinybanner.png') center bottom no-repeat; 
}

來源

2013-10-01 Stephan-v

不，你不能到邊界應用相同的元件上的背景圖片做。但是，您可以使用邊框內的另一個元素來做到這一點。 –

其中一種可能性是將橫幅圖像設爲白色背景，以便它僅覆蓋邊框的一部分，但如果您需要圖像的背景透明，則這不起作用。 –

通過使用僞選擇:after，您可以在每次H1後面加一個元素：

h1 { 
    padding-bottom: 0.5em; 
    margin-bottom: 50px; 
    border-bottom: 1px solid green; 
    display: inline-block; 
    position: relative; 
} 
h1:after { 
    position: absolute; 
    left: 50%; /* center the element */ 
    margin-left: -15px; /* shift left by (width+border)/2 */ 
    display: block; 
    content: ''; 
    width: 20px; 
    height: 20px; 
    background: green; /* this can of course be a background image, too */ 
    border: 10px solid white; /* adds a gap to the left and right */ 
}

T他之所以喜歡這種方法，是因爲它很好地降解了。如果您的瀏覽器不支持:after僞選擇器，那麼您仍然在標題下留下邊框（因爲它設置在h1上，而不是僞元素上），並且看不到懸掛的背景圖像（因爲它是設置在h1:after）。

http://jsfiddle.net/stevemchey/YFXGa/

來源

2013-10-01 22:43:45 Steve

如何使用:after sudo的元素與左右邊框：

.tinybanner h1 { 
    padding-bottom: 0.5em; 
    margin-bottom: 50px; 
    display: inline-block; 
    @include adjust-font-size-to(24px); 
    background: url('http://placekitten.com/10/20') center bottom no-repeat; 
} 

.tinybanner h1:after { 
    height:1px; 
    content:''; 
    display:block; 
    border-left: 40px solid #00ff00; 
    border-right:40px solid #00ff00; 
}

http://jsfiddle.net/bhlaird/XSdbs/

來源

2013-10-01 22:42:43

用背景圖標分割一個css邊框

回答

相關問題