使用：之後添加背景圖像，但沒有內容

爲了使按鈕CSS可重用，並且能夠容納任何長度的文本，同時仍然保留圓角，我想使用:after在主按鈕之後添加結束圓角（因此第一個圖像/文本可以增長，並且圓角將始終在最後加上。）

管理得到:after工作時，我添加內容（例如單詞「測試」和一些背景顏色），但無法讓它在那裏工作在造型上沒有內容。我只需要背景圖片就是這樣。

JSFiddle with the buttons.你可以看到:after代碼，但由於某些原因，這不會顯示。

#wizard-nav .paging:after 
{ 
background-image:url("http://i.imgur.com/GDJgl.png"); 
height:22px; 
width:7px; 
}

來源

2013-01-07 Francesca

如果向''：''選擇器添加'content：'';'會發生什麼？ –

@JanHančič我曾嘗試過，並且嘗試在內容中添加＃以查看發生了什麼。它似乎仍然忽略它，沒有內容添加，除非我親自寫了諸如TEST之類的東西。見：http://jsfiddle.net/s7KCv/2/ – Francesca

它顯示，但你寫在白色的白色。 –

使用時您需要將值設置爲content的::before和::after僞選擇。

僞元素也行內元素，所以如果你想定義的高度或寬度，則必須將其顯示爲block元件

，例如：

#wizard-nav .paging::after { 
    content: ""; 
    display: block; 
    background-image:url("http://i.imgur.com/GDJgl.png"); 
    height:22px; 
    width:7px; 
}

工作示例：http://tinkerbin.com/GSO0HpD2

來源

2013-01-07 14:21:53

完美，所以'content'在使用'：after'時總是需要的 - 我想了很多。背後的原因是什麼？ – Francesca

@Francesca：能夠控制何時顯示'：after'僞元素，以及何時不想依賴於應用它的元素。（你可以強制它不顯示，根本不要設置「content」，或者設置默認爲僞元素的content：none。） – BoltClock

http://www.w3.org/TR/CSS21/生成。html＃propdef-content <<支持@ BoltClock的評論（潛在內容值及其含義） –

-1

你有替代你的背景圖像。例如，您可以使用http://www.colorzilla.com/gradient-editor/來生成它，而不是像任何邊界半徑那樣生成它，就像您喜歡和邊框一樣多，並且您比圍繞這樣的背景圖像更快地獲得相同的效果。例如：

border:red 1px solid; 
border-radius:10px;

順便說一句 - 他們沒有出現，因爲你的背景圖像。記下你的」。 http://jsfiddle.net/WZywh/這裏有一個例子

來源

2013-01-07 14:21:23

我不想使用border-radius，因爲它在所有瀏覽器中都不受支持。 – Francesca

@Francesca當文字對於您準備的背景圖像太大時，您認爲會發生什麼？ – cimmanon

我創建了背景圖像的時間遠遠長於實際需要的時間。它會有一個特定的斷點，因爲它太小，但考慮到這比網站的主要內容區域大，它實際上永遠不會增長到這個寬度。 – Francesca

使用：之後添加背景圖像，但沒有內容

回答

相關問題