我不确定这是可能的,但我想我会看到有人对它有所了解。 我的网站有一个大的全屏图像作为主要背景。
屏幕最右侧的部分图像是一些暴风云。我想在暴风云区域添加雷击动画。
我可以处理css3动画来创建闪电,但问题是绝对定位将保存图像/动画以创建效果的div。我需要将div放置在风暴云区域上方。 (很容易:将div定位在“right:0; bottom:40px”)一旦缩小浏览器,显然背景图像大小会改变,然后绝对定位的div现在不在正确的区域他们应该是。
Javascript有什么方法可以做到这一点吗?
我正在阅读有关Css地区的一些内容,但它们仍然是非常实验性的,而且我不确定它是否适用于我的情况。
有什么想法吗?
编辑:抱歉让人困惑。我实际上只是要求将div保持在风暴云区之上。我只添加了关于以特定宽度显示这些div的部分,只是为了让您知道我没有尝试这种非常小的布局。
答案 0 :(得分:0)
实际上你可以直接在CSS中使用media queries
来隐藏你的div。很多解释here
但是一个例子是:
<style>
@media (max-width: 1024px) {
.your-stuff {
display: none;
}
}
</style>
答案 1 :(得分:0)
如果您在屏幕小于1024px分辨率时不想要闪电,则可以使用CSS媒体查询将其删除。
将其粘贴到您的CSS文件中,并将.lightning
类更新为您的选择器。
@media all and (max-width: 1024px) {
.lightning { display: none; }
}
点击此处了解有关媒体查询的详情:http://css-tricks.com/css-media-queries/