Question

在我的网站上，我创建了一个div标签，并将其背景设置为图像，每当图像悬停时，颜色会变暗。现在我还希望文本在图像悬停时水平和垂直居中显示。我尝试添加文字，但文字甚至没有出现在图片上。

这是我的HTML：

<div id="countries-hitched-div">
    <h1> Places Hitched </h1>    
    <div id="first" class="image">
        <h1 id="first-text"> India </h1>
        <div class="overlay"></div>
    </div>
</div>

这是我的CSS：

#first {
    background: url('Images/Home Page/first-quote-image-final.jpg');
    position: relative;
}

.image {
    width: 500px;
    height: 500px;
    position:relative;
}

.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
}

#first-text {
    position: absolute;
    color: black   
}

Answer 1

在您的代码中添加此更正，aligns您的重叠text位于中心，

#first-text {
 text-align:center;
 position: absolute;
 color: black;
 width:100%;
 top:45%;
}

Answer 2

首先关闭：不要在:hover上设置太多新属性。如果可能，请在页面加载时设置所有属性，并仅在:hover'ed或:focus'ed时更改必要的属性。

接下来，您有多个选项可以使h1居中：

为h1和line-height（like this example）

text-align: center

使用表格（like this）
使用flexbox（like in this tutorial）

Answer 3

对于中心尝试文本对齐中心和悬停效果尝试更改不透明度。类似的东西：

#first {
    background: url('Images/Home Page/first-quote-image-final.jpg');
    position: relative;
}
.image {    
    width: 500px;
    height: 500px;
    position:relative;
}
.image:hover > .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: .5;
}
#first-text {
    position: absolute;
    color: black
}
 #first-text {
       text-align:center;
       position: absolute;
       color: black;
       width:100%;
       top:45%;
       opacity:0.0
 }
#first:hover #first-text{
    opacity:1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="countries-hitched-div">
        <h1> Places Hitched </h1>   
            <div id="first" class="image">
                <h1 id="first-text"> India </h1>
                <div class="overlay"></div>



            </div>
</div>

Answer 4

在#first-text：

中进行更改

.image:hover #first-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    text-align: center;
}

您将在相对元素内获得居中（垂直和水平）的绝对元素。

如何在图像悬停时向图像添加文本？

4 个答案: