Question

嗨我被分配为课程做一个基本的个人资料页面，但对于其中一个html页面，我无法将文本放在每个单独的图像前面，我删除了我的尝试，以帮助缓解混淆。< / p>

<div class="aboutmeprofile">
    <h2 id="h2">Portfolio</h2>
    <hr></hr>
    <img src="assets/images/gym.jpg" alt="gym">Gym
    <img src="assets/images/hiking.jpg" alt="hiking">Hiking
    <img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
    <img src="assets/images/running.jpg" alt="running">Running
    <img src="assets/images/programming.jpg" alt="programming">Programming
</div>

  .aboutmeprofile {
    float: left;
    background-color: white;
    width: 650px;
    margin: 10px;
    line-height: 150%;
    padding: 10px;
    margin-top: 30px;
}

Answer 1

您需要使用css将文本绝对定位在图像前面。它有助于将每个图像和文本项包装到一个块中以应用css。

<div class="aboutmeprofile">
    <h2 id="h2">Portfolio</h2>
    <hr/>
    <div class="item">
        <img src="assets/images/gym.jpg" alt="gym">
        <span>Gym</span>
    </div>
    <div class="item">
        <img src="assets/images/hiking.jpg" alt="hiking">
        <span>Hiking</span>
    </div>
    <div class="item">
        <img src="assets/images/overwatch.jpg" alt="overwatch">
        <span>Overwatch</span>
    </div>
    <div class="item">
        <img src="assets/images/running.jpg" alt="running">
        <span>Running</span>
    </div>
    <div class="item">
        <img src="assets/images/programming.jpg" alt="programming">
        <span>Programming</span>
    </div>
</div>

的CSS：

.item {
    position: relative;
}

.item span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

编辑添加了简化的小提琴示例

* {
  box-sizing: border-box;
}

.aboutmeprofile {
    float: left;
    background-color: white;
    margin: 10px;
    line-height: 150%;
    padding: 10px;
    margin-top: 30px;
}

.item {
    position: relative;
    width: 100%;
}

.item span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    text-align: center;
    width: 100%;
}

<div class="aboutmeprofile">
    <h2 id="h2">Portfolio</h2>
    <hr/>
    <div class="item">
        <img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
        <span>Gym</span>
    </div>
    <div class="item">
        <img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
        <span>Hiking</span>
    </div>
    <div class="item">
        <img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
        <span>Overwatch</span>
    </div>
    <div class="item">
        <img src="https://placehold.it/400x300/ddd/ddd" alt="running">
        <span>Running</span>
    </div>
    <div class="item">
        <img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
        <span>Programming</span>
    </div>
</div>

Answer 2

执行此操作的最佳方法是为标签创建div，并使用图像作为div的背景图像。

background-image: image.png

jsfiddle

Answer 3

这就是我想出来的。只需添加其他图像及其各自的标签：

 #h2, #h3 {
	color: #4aaaa5;
	text-align: left;
	font-size: 30px;
	font-weight: bold;
	font-family: 'Georgia', Times, Times New Roman, serif;}

    #linebreak {
    clear: both;
    	border: 1px solid gray;
    	width: 100%;
    	margin: 0;
    	padding: 0;}
        .aboutmeprofile {
        	float: left;
        	background-color: white;
        	width: 650px;
        	margin: 10px;
        	line-height: 150%;
        	padding: 10px;
        	margin-top: 30px;
        }

    .aboutmeprofile {
	float: left;
	background-color: white;
	width: 650px;
	margin: 10px;
	line-height: 150%;
	padding: 10px;
	margin-top: 30px;
}


  .container {
  height: 100%;
  width: 100%;
  position: relative;
}
.image {
  width:100%;
  height:100%;
}
.text {
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
}

希望它有所帮助！

Answer 4

您可以使用position:absolute属性执行此操作，首先需要创建relative div，然后调用div中的image和h2，然后设置{ {1}}位置absolute

使用代码段检查

h2

.content_div {
	position:relative;
}
.content_div h2 {
	position:absolute;
	bottom:25px;
	color:#fff;
	font-size:18px;
}
.content_div h2 span {
	background:rgba(0,0,0,0.8);
	padding:10px;
	display:block;
	border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
	border-bottom:none;
}

多个图像前面的文字

4 个答案: