javascript - javascript 和 css 中的图像上的文字

Question

我正在尝试在使用 Javascript 添加的一组动态图像上添加文本。

我在 JavaScript 中有一个循环，它通过使用索引 i 循环来添加位于 AWS 中的图像。我想在每张图片的右下角添加索引 i 的值(因此，一个基于索引 i 值的动态标签)。

我有this到目前为止。

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 1; i < 40; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);

  allImages += '<img src= "https://s3.amazonaws.com/testimagesupload1120/' + i + '.jpg">';
}

$('#photos').append(allImages);

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}

<section id="photos"></section>

Answer 1

为此，您需要创建一个 <div>同时持有 <img>和一个 <p>标签。使用您的方法，尝试类似的方法:

allImages += '<div class="imgCard"><img src= "https://s3.amazonaws.com/testimagesupload1120/'+i+'.jpg"><p>' + i + '</p></div>';

然后，您可以使用css 对文本进行相对定位，并设置top/bottom 和left/right 属性。

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 1; i < 40; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);

  allImages += '<div class="myCard"><img src= "https://s3.amazonaws.com/testimagesupload1120/' + i + '.jpg"><p>' + i + '</p></div>';
}

$('#photos').append(allImages);

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}

.myCard {
  position: relative;
}

.myCard p {
  color: white;
  font-weight: 900;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="photos"></section>