堆栈内存溢出
  简体   繁体   English

Javascript，将random_generated图像作为背景

[英]Javascript, make random_generated image as background

 原文  2016-07-30 12:30:23  6   2    javascript/ jquery/ html/ css

问题描述

What I have 我有的

I have a HTML & javascript code : The javascript generate a random_number and use it as indexing on the array of images.Then,the script add the selected picture to the <img> tag of html code. 我有一个HTML和javascript代码：javascript生成一个random_number并将其用作图像数组的索引。然后，脚本将所选图片添加到html代码的<img>标记中。 It's works very well. 效果很好。

What I need 我需要的

I want to make the tags as background_image(display texts in it,buttons and more). 我想将标签设为background_image（在其中显示文本，按钮等）。 Is there any way to do it? 有什么办法吗？ /searched lot of in google and there's no excellent result/. /在google中搜索了很多，但没有出色的结果/。

Thank you for help. 谢谢你的帮助。 :( :( 

 window.onload = function() { var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg","http://advsys.net/ken/voxlap/cave.png"); var cGameName = new Array("Voxlap1", "Voxlap2"); var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1 var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2 var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container var comp1GameImage = document.querySelector("#container1 img"); //Image from main container var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container var comp2GameImage = document.querySelector("#container2 img"); //Image from main container comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title comp1GameImage.src = cGamePic[randomItemContainer1]; //Random image comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title comp2GameImage.src = cGamePic[randomItemContainer2]; //Random image }; 
 <!doctype html> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <title>Random_page</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="rnd.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <!--width:45%; margin: 10px;--> <div id="container1" style="float:left; width:45%; margin: 10px;"> <h1>Title</h1> <img src="" width='100%' height='100%' /> </div> <div id="container2" style="float:left; width:45%; margin: 10px;"> <h1>Title</h1> <img src="" width='100%' height='100%' /> </div> </body> </html>

2 个解决方案

解决方案1
 2 已采纳  2016-07-30 12:46:22

If you need to apply those random images as a background, it will be set as a background image of a div and not an img , so replace your img with a div and instead of writing: 如果需要将这些随机图像用作背景，则将其设置为div而不是img的背景图像，因此将img替换为div而不是编写： 

comp1GameImage.src = cGamePic[randomItemContainer1];

You will need to write: 您将需要编写： 

comp1GameImage.style.backgroundImage = "url('"+ cGamePic[randomItemContainer1]+"')";

Where comp1GameÎmage is your div . 其中comp1GameÎmage是您的div 。

Here's your updated Snippet: 这是您更新的代码段： 

 window.onload = function() { var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg", "http://advsys.net/ken/voxlap/cave.png"); var cGameName = new Array("Voxlap1", "Voxlap2"); var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1 var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2 var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container var comp1GameImage = document.querySelector("#container1"); //Image from main container var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container var comp2GameImage = document.querySelector("#container2"); //Image from main container comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title comp1GameImage.style.backgroundImage = "url('" + cGamePic[randomItemContainer1] + "')"; //cGamePic[randomItemContainer1]; //Random image comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title comp2GameImage.style.backgroundImage = "url('" + cGamePic[randomItemContainer2] + "')"; //cGamePic[randomItemContainer2]; //Random image }; 
 #container1, #container2 { display: inline-block; width: 45%; height: 100%; float: left; margin: 10px; } 
 <!doctype html> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <title>Random_page</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="rnd.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <!--width:45%; margin: 10px;--> <div id="container1"> <h1>Title</h1> </div> <div id="container2"> <h1>Title</h1> </div> </body> </html>

EDIT: 编辑：

To make the two divs split the page into two frames, give them these styles: 为了使两个div将页面分为两个框架，请给它们提供以下样式： 

#container1, #container2{
     display:inline-block;
     width:45%;
     height:100%;
}

解决方案2
 1  2016-07-30 13:28:51

You could make images look like background (NOT in background) by overlapping H1 on IMG using CSS : 通过使用CSS在IMG上重叠 H1 ，可以使图像看起来像背景（不在背景中）： 

[id*=container] {
    position:relative; /*--container is relative*/

}

 h1 {
    position:absolute; /*Image title is absolute*/
    top:30px;
    left:30px;
}

DEMO : 演示： 

 window.onload = function() { var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg","http://advsys.net/ken/voxlap/cave.png"); var cGameName = new Array("Voxlap1", "Voxlap2"); var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1 var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2 var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container var comp1GameImage = document.querySelector("#container1 img"); //Image from main container var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container var comp2GameImage = document.querySelector("#container2 img"); //Image from main container comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title comp1GameImage.src = cGamePic[randomItemContainer1]; //Random image comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title comp2GameImage.src = cGamePic[randomItemContainer2]; //Random image }; 
 [id*=container] { position:relative; } h1 { position:absolute; top:30px; left:30px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--width:45%; margin: 10px;--> <div id="container1" style="float:left; width:45%; margin: 10px;"> <h1>Title</h1> <img src="" width='100%' height='100%' /> </div> <div id="container2" style="float:left; width:45%; margin: 10px;"> <h1>Title</h1> <img src="" width='100%' height='100%' /> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript随机背景图片 - Javascript Random background Image 带有Javascript的随机背景图片 - Random Background Image with Javascript Javascript中的随机背景图片 - Random background image in Javascript 带有 setInterval 的 javascript 随机图像背景 - random image background with javascript with setInterval JavaScript随机背景图片大小 - Javascript random background image size JavaScript随机背景图片更改加载 - Javascript random background image change onload JavaScript更改随机背景图片问题 - Javascript Changing Random Background Image Issue 使用 Javascript 在 CSS 中添加随机背景图像 - Adding a random background image in CSS using Javascript 通过ID JavaScript显示随机背景图片 - Show random background image by ID JavaScript 使背景图片可点击的Javascript？ - Javascript to make background image clickable?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM