h1標籤之前和之後的css背景圖片

我必須在h1文本之前和之後對所有h1標籤進行樣式設計。h1標籤之前和之後的css背景圖片

我知道如何添加圖像，但不知道如何添加兩者。

CSS（樣式H1擁有圖像文本之前）

h1 { 
     background-image: url('images/h_ltr.png'); 
     background-position: left center; 
     background-repeat: no-repeat; 
     text-align: center; 
     font-size: 22px; 
     font-weight: bold; 
     color: #5d5d5d; 
    }

來源

2013-06-26 renathy

多背景圖像（CSS 3）或生成的內容。 – CBroe

您可以使用:before和:after CSS選擇器。

h1:before { 
 
    background-color: green; 
 
    padding: 0 20px; 
 
    content: " "; 
 
} 
 
h1:after { 
 
    background-color: red; 
 
    padding: 0 20px; 
 
    content: " "; 
 
}

<h1>Test</h1>

來源

2013-06-26 14:06:41 Novocaine

不明白這是如何工作的。我試過它沒有工作。 – renathy

你不能發佈到本地主機的鏈接，這只是在你的電腦上。看到這個小提琴爲例，使用：http://jsfiddle.net/tH2Lp/1 – Novocaine

我看到你的小提琴，我已經嘗試過與我的網頁，但它不工作，因爲我想。我需要h1位於頁面的中心，左圖應該從內容的左邊界開始，右圖應該從內容的右邊界開始。目前沒有正確的圖像出現，左側的圖像太靠右。 http://aussie-outdoordirect.com.au/import/sub/index.php?p=about_us – renathy

您也可以使用多背景圖片。在這個例子中，我設置了左，背景圖像和右眼BG圖片：

h1, h2, h3, h4, h5, h6 { 
    background-image: url("images/heading-bg-left.png"), url("images/heading-bg-right.png"), url("images/heading-bg-center.png"); /* set each bg image */ 
    background-position: left center, center center, right center; /* set position of each bg image */ 
    background-repeat: no-repeat, no-repeat, repeat-x; /* set repeat of each bg image */ 
    padding: 0 92px; /* 92px is the width of my left and right bg images */ 
    height: 120px; /* 120px is the height of each bg image */ 
    line-height: 120px; /* ditto */ 
}

的代碼是相當不言自明，但基本上我已經使用了三個background-image有三個background-position秒和3 background-repeat秒。

請注意，圖像呈現的順序相反。因此，在我的示例中，左側和右側圖像將繪製在中央圖像的頂部。

來源

2015-02-24 19:43:11

<style> 
.container{ 
    width:900px; 
    margin:0 auto; 
    position:relative; 
    overflow:hidden; 
    text-align:center; 
} 
h1{ 
    font-size:20px; 
    display:inline-block; 
    position:relative; 
    padding:0 40px; 
} 
h1:after{ 
    height:1px; 
    position:absolute; 
    content:""; 
    background:green; 
    top:10px; 
    width:500%; 
    right:-500%; 
} 
h1:before{ 
    height:1px; 
    position:absolute; 
    content:""; 
    background:red; 
    top:10px; 
    width:500%; 
    left:-500%; 
} 


</style> 

<div class="container"> 
    <h1>1</h1> 
</div>

來源

2015-05-26 20:43:42 SebastianB

h1標籤之前和之後的css背景圖片

回答

相關問題