擬似要素がコンテンツをプッシュするのを防ぐ

Question

こんにちは私はそれにいくつかのコンテンツを持っているボックスを持っています。私はホバーに表示する擬似:before要素を設定しました。この擬似要素は、ボックス全体を背景画像としてカバーする画像です。それは動作しますが、ボックス内のコンテンツをボックスの下にプッシュします。ホバー上にコンテンツが残っていて、内容が擬似要素の上に現れるようにしたいと思います。ここで

.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

がコンテンツを押し下げていないために、この疑似背景画像を持っている任意の方法はありますか？私は内容が擬似要素の上の同じ場所にとどまることを望みます。 （コンテンツは擬似要素でカバーされていません）

また、ホバー上のボックスの背景色を変更するだけではなさそうかもしれません。これは、背景画像がカスタム画像であるため、例としてそのグレー画像を使用したためです。

おかげ

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