背景色不起作用？

问题描述：

我正在尝试在图像中悬停文字。如果我为文本设置了背景颜色，它不起作用。它会工作，如果我使用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>

什么是你想达到的效果？你想让背景只为文本的宽度伸展？ – 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>

背景色不起作用？

相关推荐