Question

根据我在这里和其他地方找到的一些例子，我有一个简单的页面。

我已经让javascript工作来选择要在页面上加载的随机图片。

问题是我还希望文本位于图像前面。我已经尝试了一堆css选项来尝试向前拉文本或将图像推回（z-index等），但将这些与javascript结合使用并不起作用。甚至尝试了一些向标签添加样式信息的不同选项，但它们都没有用。

有人知道如何解决这个问题吗？这看起来像是我忽略的格式化内容，但它可能与javascript绑定。

我现在就在这里：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

无法将照片加载到上面的示例中，但希望这足以看出发生了什么。

Answer 1

大多数现代浏览器使用大量启发式方法来改善渲染时间，现在，您将反对其中一个。让我们像浏览器一样考虑这个：

页面加载，浏览器会看到以下HTML：

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

浏览器可以渲染它，所以它可以。当JavaScript运行并插入图像时，浏览器必须完全更改其视图模型，并且不知道放置的位置。

此过程除了对性能有害外，还会产生不一致的结果。要解决此问题，您必须让浏览器知道某些图像将存在。您可以通过以下几种方式之一完成此任务：

使用background-image 。首先，您必须在初始加载时将背景设置为颜色，以便在加载图像时，如果图像无法加载，则文本仍然清晰。

window.addEventListener("load", function() {
  var mes = document.getElementById("message");
  mes.style.backgroundImage = "url(https://unsplash.it/2100/1200/)"
});

.wrapper {
 background-color: #1a1a1a;
 color: #FFF;
 font-family: Helvetica;
 height: 100vh;
 width: 100vw;
 padding: 32px
}

body, html {
  height: 100%;
  margin: 0
}

<div class="wrapper" id="message">
  <h1>To protect your account, please close this tab</h1>
</div>

默认情况下插入图片。将图片标记放入页面源代码，并在其中设置样式，确保指定最终尺寸，然后如您所见更改src适合。这个很简单，你不需要演示

Answer 2

您可以使用负上边距来更改订单或z-index。看看this sample

.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>

Answer 3

根据Gerard的建议，我在这里使用了......

在＆＃34; document.write＆＃34;在javascript的底部，我把图像类放在src之前。谢谢大家!!!

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用CSS将文本拉到前面（或图像到后面），使用javascript随机选择的图像

3 个答案: