* {
margin: 0px;
padding: 0px;
}
.navigation {
background-color: black;
display: flex;
}
.navigation li {
display: inline;
color: white;
padding: 10px;
list-style: none;
font-size: 1.5rem;
}
.navigation::before {
position: absolute;
content: "";
opacity: 0.5;
z-index: -1;
background: url('http://placekitten.com/200/200');
}<div class="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
</div>我想向我的內容添加背景影像，但它沒有使用導航中的 'before' 屬性顯示為....navigation::before{image code for background}。
uj5u.com熱心網友回復：
您有兩個問題，它們各自獨立地導致您所看到的問題。你需要修復這兩個。
負 z-index
你給了::before一個負的z-index，這使它在該.navigation元素的內容。黑色背景色覆寫了::before元素，因此您看不到它。
零維度
您還沒有設定height和width，不是你用position: absolute結合left，right，top和bottom這樣的尺寸::before是基于它的內容。
的內容::before是一個空字串，因此根本不需要大小來顯示它，因此它0px由0px.
沒有渲染影像的像素。
你需要以某種方式給它一個大小。
uj5u.com熱心網友回復：
我想這會幫助你
* {
margin: 0px;
padding: 0px;
--nav-height: 2rem;
}
.navigation {
background-color: black;
display: flex;
overflow: hidden;
height: var(--nav-height);
align-items: center;
}
.navigation li {
display: inline;
color: white;
padding: 10px;
list-style: none;
font-size: 1.5rem;
}
.navigation::before {
position: absolute;
content: "";
opacity: 0.5;
background: url('http://placekitten.com/200/200');
background-size: cover;
top: 0;
left: 0;
width: 100%;
height: var(--nav-height);
}<div class="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386917.html