css - 7 个带有背景和图像的 Div

Question

我正在尝试做这个设计

除了每个 div 上的图像，我已经有了。

我怎样才能把图片放在那个位置？

我正在使用这个代码

.image {
  position:absolute;
  width:100px;
  top:33%
}

但我的问题是响应式的，它不会停留在那个位置上。这是我的代码。

body {
  margin: 0;
  background-color: darkgray
}

#main {
  background: black url("https://source.unsplash.com/random/1000x400") no-repeat center center /cover; 
  overflow: hidden;
  margin-left: -1px;
}

#main > * {
  width: calc((100% / 4) - 1px);
  height: calc((100vw / 4) - 1px);
  float: left;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -1px -1px 0 0;
  float: left;
  color: white;
  background-color: rgba(255,255,255,0);
  transition: background-color .4s cubic-bezier(.4,0,.2,1);
}
#main > *:hover {
  background-color: rgba(255,255,255,.35);
  cursor: pointer;
}
#main > *:first-child {
  height: calc((100vw / 2) - 1px);
}
body {
  margin: 0;
}

@media (max-width: 539px) {
  #main>* {
    width: calc((100% / 2) - 1px);
    height: calc((100vw / 2) - 1px);
  }
  #main>*:first-child {
    height: calc(100vw - 1px);
  }
}


.icon {
       position:absolute;
      width:100px;
      top:33%
}

<div id="main">
  <div> 
   <img class="icon" src ="http://via.placeholder.com/350x150">
    Excellence 
  </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">
    Quality </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">Efficiency </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">Creativity </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">Faith </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">Effectiveness </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">Teamwork </div>
</div>

Answer 1

您可以像这样调整代码。

您需要使父 div position:relative 并使用 margin:auto 使图像居中。然后你可以添加一些翻译来调整位置。

body {
  margin: 0;
  background-color: darkgray
}

#main {
  background: black url("https://source.unsplash.com/random/1000x400") no-repeat center center /cover;
  overflow: hidden;
  margin-left: -1px;
}

#main>* {
  width: calc((100% / 4) - 1px);
  height: calc((100vw / 4) - 1px);
  float: left;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -1px -1px 0 0;
  float: left;
  color: white;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

#main>*:hover {
  background-color: rgba(255, 255, 255, .35);
  cursor: pointer;
}

#main>*:first-child {
  height: calc((100vw / 2) - 1px);
}

body {
  margin: 0;
}

@media (max-width: 539px) {
  #main>* {
    width: calc((100% / 2) - 1px);
    height: calc((100vw / 2) - 1px);
  }
  #main>*:first-child {
    height: calc(100vw - 1px);
  }
}

.icon {
  position: absolute;
  width: 100px;
  margin:  auto;
  transform:translate(0,-30px);
}

<div id="main">
  <div>
    <img class="icon" src="http://via.placeholder.com/350x150"> Excellence
  </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150"> Quality </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150">Efficiency </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150">Creativity </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150">Faith </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150">Effectiveness </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150">Teamwork </div>
</div>