我正在尝试将图片悬停在图片中。如果我为文本设置背景颜色则不起作用。如果我使用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>
&#13;
答案 0 :(得分:0)
根据我的理解,您可以使用CSS和HTML实现这种效果。
我在:hover
div上使用.wrapper
选择器,以便根据我想要实现的结果应用不同的样式。
示例强>
* {
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;
}
&#13;
<main>
<div class="wrapper">
<p>
#trending
</p>
</div>
</main>
&#13;