我有一个非常活跃的网站背景(我说的是6个左右不同的z索引,其中2个带有动画).我想在前景中有一个内容,但想要一个"窗口"到它的背景.我遇到的一些问题:
你不能在背景中"打洞",所以......
无论我怎么努力,"正确"的div都不会填补"顶部"和"底部"div之间的空间,我尝试了很多不同的东西.它必须是动态的原因是"left"div中的文本是基于背景颜色动态的,背景颜色本身是用JavaScript随机生成的.
如何显示:表; 以及所有其他相关的CSS代码,如表格?它怎么用?
我正在尝试使用CSS中的动画创建一个漂亮的旧CRT"电视"效果,但是在显示上方和下方预期div的扫描线有一些问题.
我所拥有的是一个登陆页面,其中有4个div链接到该站点的其他区域.前2个div是"TV",每个都有一个背景,显示链接内容的"tv"(静态图像).
在桌面或其他更大的屏幕上,4个div显示为2x2,在较小的屏幕上显示为1x4格式.
我创建了一个单独的图像,用css动画来伪造移动的扫描线向下移动到前2个div.
发生的事情是"扫描线"出现在"电视"上方并移动到"电视"下方.
你可以看到JSFiddle上发生了什么:http: //jsfiddle.net/blyzz/ynekxcud/2/
这是一些清理过的HTML代码:
<a href="URL1" target="_blank">
<div class="content" id="outside">
<div class="scanlines">
<div class="aniscan" id="aniscanout">
</div>
<div class="aniscan" id="aniscanout2">
</div>
</div>
</div>
</a>
<a href="URL2" target="_blank">
<div class="content" id="inside">
<div class="scanlines">
<div class="aniscan" id="aniscanin">
</div>
<div class="aniscan" id="aniscanin2">
</div>
</div>
</div>
</a>
Run Code Online (Sandbox Code Playgroud)
以及随附的清洁CSS:
.content{
width: 300px;
min-width: 300px;
height: 125px;
min-height: 125px;
float:left;
margin: 5px;
border: 3px solid #555555;
z-index: -100;
}
.scanlines{
width: 100%;
height: 100%;
background-repeat: repeat;
z-index: 100;
}
.aniscan{
width: …Run Code Online (Sandbox Code Playgroud)