Salut je suis assigné à faire une page de profil de base pour la classe, mais pour l'une des pages html, je suis incapable de mettre le texte devant chaque image individuelle, j'ai supprimé mes tentatives pour aider à atténuer la confusion.

<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;
}
0
user7139450 26 janv. 2017 à 06:28

4 réponses

Meilleure réponse

Vous devrez positionner de manière absolue votre texte devant l'image avec css. Cela aide à envelopper chaque image et élément de texte dans un bloc pour appliquer le 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%);
}

Modifier: Ajout d'un exemple de violon simplifié

* {
  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>
0
dommmm 26 janv. 2017 à 08:14

C'est ce que j'ai trouvé. Ajoutez simplement les autres images et son étiquette respective:

 #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>

J'espère que cela aide!

0
mindOfAi 26 janv. 2017 à 03:54

La meilleure façon de faire est de créer un div pour l'étiquette et d'utiliser l'image comme image d'arrière-plan pour le div.

background-image: image.png

jsfiddle

0
JakAttk123 26 janv. 2017 à 03:46

Vous pouvez simplement le faire avec la propriété position:absolute, vous devez d'abord créer un div relative, puis appeler les image et h2 à l'intérieur du div, puis définir {{X4} } position sur h2

Vérifiez avec l'extrait de code

.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 -->
0
Jishnu V S 27 janv. 2017 à 03:43