多个图像前面的文本

Question

嗨，我

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

<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

斯菲德尔

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%;
}

<div class="aboutmeprofile">
	<h2 id="h2">Portfolio</h2>
	<hr>
<div class="container">
  <img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
  <span class="text">
   Gym
  </span>
</div>
<div class="container">
  <img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
  <span class="text">
    Hiking
  </span>
</div>
</div>

希望对您有所帮助！

Answer 4

你可以

简单地用position:absolute属性来做到这一点，首先你需要创建一个relativediv，然后在div内调用image和h2，然后将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;
}

<div class="content_div">
	<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
    <h2>
    <span>A Movie in the Park:</span>
    <span>Kung Fu Panda</span>
    </h2>
</div><!-- /.content_div -->