背景色不起作用？

我正在嘗試在圖像中懸停文字。如果我爲文本設置了背景顏色，它不起作用。它會工作，如果我使用position: absolute;但它也懸停我的頭。背景色不起作用？

.comimg { 
 
    width: 100%; 
 
    height: 75%; 
 
} 
 
.tren { 
 
    margin-top: -250px; 
 
    margin-bottom: -300px; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: aqua; 
 
    overflow: none; 
 
} 
 
.trust p { 
 
    margin-top: -19; 
 
    font-size: 10px; 
 
    font-weight: bolder; 
 
    color: #424242; 
 
} 
 
.comimg p { 
 
    font-family: 'Open Sans', sans-serif; 
 
    width: auto; 
 
    height: auto; 
 
    font-size: 2em; 
 
    color: aliceblue; 
 
    background-color: aqua; 
 
    font-weight: 900; 
 
} 
 
.comimg img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="comimg"> 
 
    <img src="img/6042013705_eb32ce58fa_o.jpg" /> 
 
    <div class="tren"> 
 
    <p>#trending</p> 
 
    </div> 
 
</div>

來源

2016-02-26 Vignesh warar

什麼是你想達到的效果？你想讓背景只爲文本的寬度伸展？ – fbid

我建議你看看CSS中的http://www.w3schools.com/cssref/pr_pos_z-index.asp屬性。 – Nathangrad

@Nathangrad儘量避免鏈接到w3schools。雖然他們在頁面上修正了很多錯誤，但他們的頁面上仍然存在不準確和誤導性的信息。與前幾年相比，它們變得更好，但它仍然不是一個很好的信息來源。在這裏他們寫'[...]具有較大堆棧順序的元素始終位於堆棧順序較低的元素前面[...]'，但它們不會在頁面中添加明顯的鏈接詳情。具有z索引3的元素可以位於具有z索引-1的元素之後，具體取決於嵌套結構。 –

根據我的理解，你可以實現使用CSS和HTML這種效果。

我在.wrapper div上使用:hover選擇器，以便根據我想要實現的結果應用不同的樣式。

例

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: Helvetica, sans-serif; 
 
} 
 

 
main { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
.wrapper { 
 
    height: 100vh; 
 
    width: 100%; 
 
    background: url('http://lorempixel.com/500/500/abstract') no-repeat; 
 
    background-size: cover; 
 
    display: table; 
 
} 
 

 
.wrapper:hover { 
 
    background: #fda; 
 
} 
 

 
.wrapper:hover p { 
 
    background: #345; 
 
    display: block; 
 
} 
 

 
p { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    color: #fff; 
 
    font-size: 2.4em; 
 
    display: none; 
 
}

<main> 
 
    <div class="wrapper"> 
 
    <p> 
 
     #trending 
 
    </p> 
 
    </div> 
 
</main>

來源

2016-02-26 14:10:19 fbid

背景色不起作用？

回答

相關問題