<分区>
假设我有一定数量的图像,我想在我的网站上将其完全覆盖作为背景。
对于每个背景图像,我希望在屏幕中央显示一个特定的文本。
每个背景图像及其对应的文本都应通过单击按钮随机化。
我现在没有任何 JavaScript 或 jQuery,这似乎是解决方案。虽然,我还没有为我的问题找到任何好的代码。是否有代码可以满足我的要求?
谢谢!
JSFiddle网站演示。
HTML:
<div id="background">
<div id="box">
<div class="title">TITLE OF WEBSITE</div>
<div class="text">Text corresponding to the specfic background shown.</div>
<div class="button">
<button type="button">Randomizing button</button>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
#background {
height: 100%;
}
#box {
background: #fff;
width: 40%;
min-width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
top: 40%;
position: relative;
}
.title {
width: 100%;
height: 50px;
float: left;
background: #e1e1e1;
text-align: center;
font-size: 24px;
line-height:50px;
}
.text {
background: #c8c8c8;
width: 100%;
height: 100px;
float: left;
text-align: center;
font-size: 18px;
position: relative;
padding-top: 20px;
}
.button {
width: 100%;
height: 50px;
float: left;
text-align: center;
background: #afafaf;
}