CSS：將背景圖像插入到標題中

我試圖插入背景圖像作爲我的標題的背景。很順利，如果我要使用的背景顏色作爲背景的頭CSS：將背景圖像插入到標題中

h2 { 
    background-color: red; 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    font-size: 1.5em ; 
    text-transform: uppercase; 
}

但是，它並沒有順利的背景圖像....

代碼：

h2 { 
    background-image: url("gear.png"); 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    font-size: 1.5em ; 
    text-transform: uppercase; 
}

有人可以指導我解決問題嗎？我非常感謝你的幫助。 Thx

來源

2014-03-03 Insidious.C

定義「不順利」。 –

你可以顯示HTML嗎？ – BeNdErR

是正確的圖像路徑？用螢火蟲檢查。 – SamotnyPocitac

參見background-position和background-repeat。

h2 { 
    background-image: url("gear.png"); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    font-size: 1.5em; 
    text-transform: uppercase; 
}

來源

2014-03-03 21:45:54 Toothbrush

背景造型也可以簡稱爲'background：url（gear.png）no-repeat top left;' – Eeji

我認爲最好的方法是將h2包裹在div中。它會看起來更好看。

<div style="padding:15px;background-image:url('gear.png');background-repeat:no-repeat;"> 
<h2>This is your header</h2> 
</div>

還要確保該圖像是在同一文件夾作爲HTML文件

來源

2014-03-03 21:50:28 KM123

你有2種選擇：

您可以添加背景爲H2的背景：

h2 { 
    background-image: url("http://www.pawelkaim.com/img/videoEditingIreland.png"); 
    background-repeat:no-repeat; 
    background-position: 0 0; 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    font-size: 1.5em ; 
    text-transform: uppercase; 

}

但這可能不是最好的解決方案。

我建議你創建額外的DIV，把一個H2標籤中：

<div class="bg"> <h1> Hello world</h1></div> 

.bg{ 
    background-image: url("http://www.pawelkaim.com/img/videoEditingIreland.png"); 
    background-repeat:no-repeat; 
    width: 300px; 
    height:200px; 
}

在這種情況下，你可以調整你的DIV的寬度和高度值，以達到最佳的樣子。你也可以用Css定位你的標題。

h1{ 
padding-left: 50px; 
padding-top:50px; 
}

這裏是一個fiddle

來源

2014-03-03 22:59:52

CSS：將背景圖像插入到標題中

回答

相關問題