javascriptとcssでの画像上のテキスト

Question

私はJavascriptで追加した一連の動的画像にテキストを追加しようとしています。

私は、インデックスiでループすることによってAWSに配置された画像を追加するJavaScriptのループを持っています。 私は、各ピクチャの右下にインデックスiの値を追加したいと思います（したがって、インデックスiの値に基づく動的タグ）。

これまでのところthisです。

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：

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

Answer 1

、これを達成するために、あなたは<img>と<p>の両方を保持するために<div>を作成する必要がありますタグ。あなたは、比較的テキストを配置し、トップ/ボトムおよび左/右のプロパティを設定するためにCSSを使用することができ、その後

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

：あなたの方法を使用して、のようなものを試してみてください。

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