CSS標題1級的背景圖像

我在這裏有這個圖片我想有作爲我的背景圖片爲h1http://inauguralseason.com/wp-content/themes/twentyeleven/images/wehavelaunched.png CSS標題1級的背景圖像

我的問題是我怎麼得到這個角色向左出現？這是我目前的CSS代碼

.homeBottom h1 { 
    background-image: url("http://inauguralseason.com/wp-content/themes/twentyeleven/images/wehavelaunched.png"); 
    color: #FFFFFF; 
    height: 36px; 
    margin-left: -50px; 
    width: 589px; 
}

我還以爲使用margin-left:-50px會工作，但事實並非如此。

來源

2012-09-24 user1269625

您指定height: 36px;但您的圖像是86px高。改變高度爲86px，你會看到整個事情。

如果36px是正確的高度，您可以改變背景位置。

background-position: left bottom;

來源

2012-09-24 03:54:51 Matthew

做出這些改變

.homeBottom { 
position: relative; 
} 

.homeBottom h1 { 
position: absolute; 
left: -50px; 
top: /* give as per required */ 
}

來源

2012-09-24 03:55:30

嗨現在用於after在你的CSS

像這樣

HTML

<h1>Hello testing page </h1>

的CSS

h1{ 
background:red; 
    padding-left:20px; 
    position:relative; 
    height:40px; 
    line-height:40px; 
} 
h1:after{ 
content:''; 
    position:absolute; 
    left:6px; 
    top:18px; 
    background:green; 
    width:30px; 
    height:30px; 
z-index:-1; 
/* Firefox */ 
-moz-transform: rotate(-65deg); 
/* Safari */ 
-webkit-transform: rotate(-65deg); 

/* IE */ 
-ms-transform: rotate(-65deg); 

/* Opera */ 
-o-transform: rotate(-65deg); 

}

演示http://tinkerbin.com/QTAO90R0

來源

2012-09-24 04:21:16

您還可以使用Background-size屬性（CSS3）。您可以在其中設置背景圖像的width和height。在你的情況，如果你想設置背景圖片一樣h1元素的height然後給的height：