Position Hintergrund und Text beim gehen responsive

Ich habe 2 Spalten mit Stiftung und das einzige, was die Bilder auf der Website genau wie ich will, ist der folgende Code und CSS. Mein Problem ist, dass ich den Text und die Informationen nicht bekommen kann, um über das Bild zu gehen und in der Mitte zu bleiben.Position Hintergrund und Text beim gehen responsive

gehen Sie hier https://www.battlefield.com/ und unter der Einleitung Abschnitt diese 2 Spalten ist, was ich versuche zu erreichen.

ich versucht habe, Flex und Block, wenn das Bild als Hintergrund der Spalte festgelegt ist es nicht, wie ich können

.what{ 
 
     max-height: 428px; 
 
    \t height: 100%; 
 
    \t overflow: hidden; 
 
    } 
 

 
    .nopad{ 
 
    \t padding: 0px; 
 
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" rel="stylesheet"/> 
 
    <body> 
 
    <div class="row expanded"> 
 
    \t <div class="columns medium-6 what nopad"><img src="http://media-www-battlefieldwebcore.spark.ea.com/content/battlefield-portal/en_US/_jcr_content/par/panelgrid/panels/panel/backgroundImage/image/xlarge.img.jpg"></div> 
 
    \t <div class="columns medium-6 what nopad"><img src="http://media-www-battlefieldwebcore.spark.ea.com/content/battlefield-portal/en_US/_jcr_content/par/panelgrid/panels/panel_0/backgroundImage/image/xlarge.img.jpg"> 
 
     </div> \t 
 
    </div> 
 
    </body>

Quelle

2017-05-18 Case

Sie verwenden reagiert will position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); ein Element zum Zentrum über die Bild.

.what { 
 
    max-height: 428px; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.nopad { 
 
    padding: 0px; 
 
} 
 

 
.info { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    background: rgba(255,255,255,0.5); 
 
    padding: 1em; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="row expanded"> 
 
    <div class="columns medium-6 what nopad"> 
 
     <img src="http://media-www-battlefieldwebcore.spark.ea.com/content/battlefield-portal/en_US/_jcr_content/par/panelgrid/panels/panel/backgroundImage/image/xlarge.img.jpg"> 
 
     <p class="info">text</p> 
 
    </div> 
 
    <div class="columns medium-6 what nopad"> 
 
     <img src="http://media-www-battlefieldwebcore.spark.ea.com/content/battlefield-portal/en_US/_jcr_content/par/panelgrid/panels/panel_0/backgroundImage/image/xlarge.img.jpg"> 
 
     <p class="info">text</p> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2017-05-18 19:22:31

können Sie mit z-index versuchen, den Text auf dem Bild zu platzieren:

.text { 
    z-index: 100; 
} 
img { 
    z-index: -1; 
}

Quelle

2017-05-18 19:24:33

Position Hintergrund und Text beim gehen responsive

Antwort

Verwandte Themen