3枚の画像がテキストで並んでいます

3枚の画像を隣り合わせて表示したいのですが、画面全体を埋めるようにします。だから私はこれを持っている：3枚の画像がテキストで並んでいます

.container { 
 
     position: relative; 
 
     text-align: center; 
 
     color: white; 
 
     max-width: 99%; 
 
    } 
 
    img.forside, 
 
    img.forside-1, 
 
    img.forside-2 { 
 
     opacity: 0.7; 
 
    } 
 
    img.forside:hover, 
 
    img.forside-1:hover, 
 
    img.forside-2:hover { 
 
     transition: 1s ease; 
 
     opacity: 1; 
 
     filter: brightness(70%); 
 
    } 
 
    img.forside-2 { 
 
     width: 30%; 
 
     display: inline-block; 
 
     margin-top: 2%; 
 
    } 
 
    img.forside-1 { 
 
     width: 30%; 
 
     display: inline-block; 
 
     margin-left: 2%; 
 
     margin-right: 3%; 
 
     margin-top: 2%; 
 
    } 
 
    img.forside { 
 
     width: 30%; 
 
     display: inline-block; 
 
     margin-right: 3%; 
 
     margin-top: 2%; 
 
    }

<div class="forsidebilleder"> 
 
    <a href="index.php/personlig-traening"><img class="forside-1" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" /> 
 
    </a> 
 
    <a href="index.php/individuel-programmering"><img class="forside" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" /> 
 
    </a> 
 
    <a href="index.php/crossfit-bootcamp"><img class="forside-2" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" /> 
 
    </a> 
 
</div>

私はそれがより良い書き込むことができます知っているが、私はそれを動作させることができませんでした。しかし、この方法では、3つの画像が完全に隣り合っていて、両側に同じ量のスペースがあります。しかし、私が欲しいのは、それぞれのイメージの上に見出しを書くことですが、私はどのようにわかりませんか？

ご理解いただけますか？ :)ちょっと混乱している場合は申し訳ありません。

出典

2017-11-28 Daniel Jensen

私たちは試してみることができますか？ – Swellar

フレックスを使用してください。 display：flexのようなプロパティ。フレックス方向：右。。基本的なフレックスプロパティを使用して、必要に応じて整列させることができます。 –

@Swellar Ehm、どうすればいいですか？：D私はここに新しいです:) –

flexを使用して背景画像を考慮して、その上にテキストを使用することができます。また、画像の不透明度を制御するためにオーバーレイを追加する可能性があります。

UPDATEを

モバイル

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 

 
.image { 
 
    position: relative; 
 
    flex: 1; 
 
    margin: 5px; 
 
    text-align: center; 
 
    background-size: cover; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.image:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: 1s; 
 
} 
 

 
.image:hover::before { 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.image p { 
 
    position: relative; 
 
    z-index: 1; 
 
    flex: 1; 
 
    color: #fff; 
 
    font-size: 18px; 
 
} 
 

 
@media all and (max-width:460px) { 
 
    .container { 
 
    flex-direction: column 
 
    } 
 
}

<div class="container"> 
 
    <div class="image" style="background-image:url(https://lorempixel.com/400/600/)"> 
 
    <p>text text</p> 
 
    </div> 
 
    <div class="image" style="background-image:url(https://lorempixel.com/500/400/)"> 
 
    <p>text text</p> 
 
    </div> 
 
    <div class="image" style="background-image:url(https://lorempixel.com/600/600/)"> 
 
    <p>text text</p> 
 
    </div> 
 
</div>

あなたはマージンを調整することができる上、より良いビューのための

追加メディアクエリそしてあなたが望むような高さ。

出典

2017-11-28 09:55:07

私は画像上のテキストが欲しいです:)画像に書かれていた場合、以下のようには好きではありません:) –

@DanielJensen ok am am updated;） –

@DanielJensen again again :) –

<style> 
img { 
    width: 100%; 
} 
.timetable { 
    position: relative; 
} 
.content { 
    position: absolute; 
    z-index: 999999; 
    bottom: 0; 
    color: white; 
    padding-left: 21px; 
} 
</style> 



<!DOCTYPE html> 
<html> 
<head> 
    <title>Gallery</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
</head> 
<body> 

<div class="timetable"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="set up time" width="30%"> 
      <div class="content"> 
       <h3>Hello</h3> 
      </div> 
      </div> 
      <div class="col-md-4"> 
      <img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="doors open" width="30%"> 
      <div class="content"> 
       <h3>Hello</h3> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="Foodtrucks" width="30%"> 
      <div class="content"> 
       <h3>Hello</h3> 
      </div> 
     </div> 
     </div> 
     </div> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 
</html>

出典

2017-12-18 08:22:32 Harshaja

3枚の画像がテキストで並んでいます

答えて

関連する問題