图片在javascript和CSS中的文字 [英] Text over image in javascript and css

问题描述

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

I am trying to add text over a set of dynamic images that I have added with Javascript.

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

I have a loop in JavaScript that adds images that are located in an AWS by looping with an index i. I'd like to add the value of the index i in the bottom right side of each picture (hence, a dynamic tag based on the value of the index i).

到目前为止，我有这.

HTML:

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

CSS:

#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;
}

JAVASCRIPT:

JAVASCRIPT:

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);

推荐答案

要实现此目的，您将需要创建一个< div> 来同时容纳< img> 和< p> 标记.使用您的方法，尝试类似的事情:

To accomplish this, you will need to create a <div> to hold both the <img> and a <p> tag. Using your method, try something like:

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

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

Then, you can use css to position the text relatively and set the top/bottom and left/right properties.

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>

这篇关于图片在javascript和CSS中的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！