3个图像彼此相邻，带有文字

问题描述 投票：0回答：2

我希望彼此相邻的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幅图像完全相邻，每边的空间相同。但我想要的是在每张图片上写一个标题，但我不知道怎么做？

你明白这个问题了吗？ :)对不起，如果它有点凌乱。

html css css3
2个回答
2
投票

您可以简单地使用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>

您可以根据需要调整边距和高度。

1
投票
<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.