hss 태그 전후의 CSS 배경 이미지

Question

h1 텍스트 앞뒤에 이미지가 있도록 모든 h1 태그의 스타일을 지정해야합니다.

이전에 이미지를 추가하는 방법을 알고 있지만 두 가지를 추가하는 방법을 모르겠습니다.

CSS

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; 
    } 

Answer 1

당신은 :before 및 :after CSS 선택기를 사용할 수 있습니다 (스타일링 H1 텍스트 전에 이미지가합니다).

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

<h1>Test</h1>

Answer 2

는 또한 여러 개의 배경 이미지를 사용할 수 있습니다. 이 예제에서는 배경 왼쪽, 센터의 이미지와 잘 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-position의 세 background-repeat의 세 background-image의를 사용하고 있습니다.

이미지는 역순으로 렌더링됩니다. 예를 들어 왼쪽과 오른쪽 이미지가 가운데 이미지 위에 그려집니다.

Answer 3

<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>