个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
所以我有这样的挑战: body 背景上的图像，背景大小，覆盖以适合整个屏幕。在背景图像上是一些元素(建筑物)。所以我想将鼠标悬停在建筑物上，他们会更改颜色或添加阴影等。问题在于屏幕调整大小，当我调整屏幕大小时我找不到一个公式可以移动覆盖 div 以适应建筑物背景。
html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/fixes.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body class="home">
<div class="map">
<div class="building1"></div>
</div>
</body>
</html>
CSS:
.home{
background:url(../img/homeBg1200.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
js:
$(document).ready(function() {
function fixes() {
var windowW = window.innerWidth,
windowH = window.innerHeight;
if(windowW > 1199) {
var proportionH,
proportionW,
indexTop,
indexLeft,
top1,
left1,
width1,
height1;
//indexTop = (proportionH-800)/3;
if((windowW / windowH) < 1.5) {
proportionW = (windowH * 1200/800);
proportionH = (proportionW * 800/1200);
indexLeft = (proportionW - 1200)*0.001;
indexTop = (proportionH - 800)*0.001;
top1 = proportionH*0.178-indexTop;
left1 = proportionW*0.476-indexLeft;
width1 = (proportionW )*0.084;
height1 = (proportionH)*0.482;
} else {
proportionH = (windowW * 800/1200);
proportionW = (proportionH * 1200/800);
indexLeft = (proportionW - 1200)*0.001;
indexTop = (proportionH - 800)/2;
top1 = proportionH*0.178-indexTop;
left1 = proportionW*0.476+indexLeft;
width1 = (proportionW )*0.084;
height1 = (proportionH)*0.482;
}
$('.building1').css({
'top': top1,
'left': left1,
'width':width1,
'height':height1
});
}
}
fixes();
$(window).resize(function() {
fixes();
});
});
这有可能实现吗？
谢谢
ps:刚刚复制了这里的代码:http://hardware-trade.com/site/
最佳答案
这可以不用 javascript 来解决。你应该在 css 中使用媒体查询。
关于javascript - 滚动负责的背景图像覆盖尺寸 : is it possible?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18636689/
27
4
0
我新发现了 Perl fork ，我非常喜欢。但有一件事让我担心——如果我只是左右分离进程，这肯定会在某个地方引起一些问题。是否应该使用一种合理的检查来确保我的小应用程序不会占用我机器的所有资源？ 拿
谁负责 MVVM 中的异步数据获取？例如，我的 View 有 5 个不同的数据集合要获取，我希望按预定义的顺序异步检索这些数据。为此，我使用协程和任务。 问题:VM 是否对此负责，我的模型/存储库应该
我有什么 ember-cli POD 结构。我有嵌套的路由，因此有以下文件夹结构: | |_pods |_items |_index | |_
我有一个 C# WPF 应用程序，它从数据库中读取数据然后做一些工作。但问题是当我读取数据时，我的 UI 没有响应。我已经尝试过任务和调度程序。他们都没有帮助。下面的代码在 button_click
在使用 /sys/class/leds/ 摆弄 LED 之后，我现在正试图了解如何使用 linux kernel power supply attributes 控制计算机中的电池。 ，特别是 CHA
我在我的桌面应用程序中做了一些非常简单的错误记录，该应用程序通过 SerialPort 与设备通信。我做的一件事是设置一个全局异常捕获器，它除了使用以下方法记录堆栈跟踪外什么都不做: AppDomai
我是一名优秀的程序员,十分优秀！