У меня есть простая страница, с которой я играю, основываясь на некоторых примерах, которые я нашел здесь и в других местах.

У меня есть JavaScript, работающий, чтобы выбрать случайное изображение для загрузки на странице.

Проблема в том, что я также хочу, чтобы текст был перед изображением. Я пробовал кучу опций css, чтобы попытаться потянуть текст вперед или отодвинуть изображения назад (z-index и т. Д.), Но их использование в сочетании с javascript не работает. Даже пробовал пару разных вариантов добавления информации о стиле в тег, но ни один из них не сработал.

У кого-нибудь есть идеи, как это осуществить? Это похоже на форматирование, которое я пропускаю, но это может быть связано с javascript.

Вот где я сейчас нахожусь:

function random_pic(){
var pics=new Array();

pics[1]="http://placehold.it/350"
pics[2]="http://placehold.it/350"
pics[3]="http://placehold.it/350"
pics[4]="http://placehold.it/350"
pics[5]="http://placehold.it/350"
pics[6]="http://placehold.it/350"
pics[7]="http://placehold.it/350"
pics[8]="http://placehold.it/350"
pics[9]="http://placehold.it/350"

var pic=Math.floor(Math.random()*pics.length);
if (pic==0){pic=1;}
document.write('<img src="'+pics[pic]+'" border=0>');
}
random_pic();
body {
    background-color: #EFEFEF;
    background-repeat: no-repeat;
    height: 100%;
    margin: 0;
    padding: 0;
}

.image {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.style {
    text-align: center;
    font-size: 30px;
    font-family: Helvetica;
    color: #003399;
}
<br><br><br><br><br><br>
<p class="style"><strong>To protect the security of your account,<br> please close this tab or browser</strong></p>

Не могу загрузить фотографии в приведенный выше пример, но, надеюсь, этого достаточно, чтобы увидеть, что происходит.

1
airider74 27 Май 2017 в 21:43

2 ответа

Лучший ответ

Вот что я использовал, основываясь на предложении Джерарда ...

Внутри «document.write» внизу javascript я помещаю класс изображения перед src. Спасибо всем!!!

function random_pic(){
var pics=new Array();

pics[1]="../images/exit_1.png"
pics[2]="../images/exit_2.png"
pics[3]="../images/exit_3.png"
pics[4]="../images/exit_4.png"
pics[5]="../images/exit_5.png"
pics[6]="../images/exit_6.png"
pics[7]="../images/exit_7.png"
pics[8]="../images/exit_8.png"
pics[9]="../images/exit_9.png"

var pic=Math.floor(Math.random()*pics.length);
if (pic==0){pic=1;}
document.write('<img class="image" src="'+pics[pic]+'" border=0>');
}
random_pic();
body {
    background-color: #EFEFEF;
    background-repeat: no-repeat;
    height: 100%;
    margin: 0;
    padding: 0;
}

.image {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.style {
    text-align: center;
    font-size: 30px;
    font-family: Helvetica;
    color: #003399;
}
<br><br><br><br><br><br>
<p class="style"><strong>To protect the security of your account,<br> please close this tab or browser</strong></p>
0
airider74 27 Май 2017 в 19:46

Вы можете использовать отрицательное верхнее поле для изменения порядка или z-index. Посмотрите этот пример

.greenleftarrow{
position: relative;
z-index:10;
display:block;
background: green url(./images/greenleftarrow.jpg) no-repeat;
left:10px;
top: 0px;
height:140px;
opacity:0.5;
filter:alpha(opacity=50);
}

#over {
    margin-top: -140px;
}
<div class="greenleftarrow"  id="greenleftarrow" ></div>
<div id="over">body body body body</div>
0
MayorMonty 27 Май 2017 в 19:00