psuedo 요소가 콘텐츠를 푸시하는 것을 방지합니다.

Question

안녕하세요. 콘텐츠가 포함 된 상자가 있습니다. 나는 호두에 표시 할 풋내기 :before 요소를 설정했습니다. 이 psuedo 요소는 배경 이미지로 설정된 전체 상자를 덮는 이미지입니다. 작동하지만 상자의 내용을 상자 아래로 밀어 넣습니다. 호버 위에 콘텐츠가 남아 있고 콘텐츠가 가짜 요소 위에 표시되도록하시기 바랍니다.

.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #333; 
 
} 
 
.box p { 
 
    color: green; 
 
} 
 
.box:before { 
 
    content: ''; 
 
    background: url('https://ewans.files.wordpress.com/2008/07/grey1.jpg'); 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.box:hover:before { 
 
    display: block; 
 
}

<div class="box"> 
 
    <p>content content content</p> 
 
</div>

여기 jsfiddle 링크

jsfiddle

콘텐츠를 아래로 밀어 넣지이 사이비 배경 이미지를 가질 수있는 방법이 무엇입니까? 나는 그 내용이 psuedo 요소 위에 같은 장소에 있기를 원합니다. (내용이 psuedo 요소에 의해 보호되지 않음)

또한 왜 호버에 상자의 배경색을 변경하지 않는지 묻는 중일 수 있습니다. 이는 배경 이미지가 맞춤 이미지이기 때문에 그 회색 이미지를 예제로 사용했기 때문입니다.

감사합니다.

Answer 1

이렇게하면 의사 절대 값을 배치 할 수 있습니다.

.box { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #333; 
 
} 
 

 
.box p { 
 
    color: green; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.box:before { 
 
    content: ''; 
 
    display: none; 
 
    position: absolute; 
 
    background: url('https://ewans.files.wordpress.com/2008/07/grey1.jpg'); 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.box:hover:before { 
 
    display: block; 
 
}

<div class="box"> 
 
    <p>content content content</p> 
 
</div>

Answer 2

시도 :

.box{ 
    width: 200px; 
    height: 200px; 
    background-color: #333; 
    position: relative; 
} 

.box:before{ 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: /* your image here */ 
    z-index: -1; 
}