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>

Answer 2

你也可以使用最轻量进程伪元素计数器的css：

#photos {
    counter-reset: img-counter;
}
#photos .myCard:after{
    content: counter(img-counter);
    counter-increment: img-counter;
    font-size: 26px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #fff;
  background:#000;
}

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"></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;
}

#photos {
  counter-reset: img-counter;
}

#photos .myCard:after {
  content: counter(img-counter);
  counter-increment: img-counter;
  font-size: 26px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #fff;
  background: #000;
}

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

Codepen Demo Link