css将图片用相对定位到页面正中间
我想做个效果，鼠标移上一张图片，然后显示二维码的大图，那张大图显示的位置要在页面正中间，而且遮住那些文字，加我2197527824...
我想做个效果，鼠标移上一张图片，然后显示二维码的大图，那张大图显示的位置要在页面正中间，而且遮住那些文字，
加我 2197527824 展开
加我 2197527824 展开
2个回答
展开全部
最简单的方法：给图片单独套个div，给div做margin设置就好了，设置用百分比，具体如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片居正中间__郭凯旗</title>
<style>
html{height:100%; width:100%}
body{height:100%; width:100%}
.d1{width:300px;
height:200px;
background:red;
position:fixed;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-150px;
}
.d1 img{width:100%;height:100%}
</style>
</head>
<body>
<div class="d1">
<img src="1.jpg"/>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片居正中间__郭凯旗</title>
<style>
html{height:100%; width:100%}
body{height:100%; width:100%}
.d1{width:300px;
height:200px;
background:red;
position:fixed;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-150px;
}
.d1 img{width:100%;height:100%}
</style>
</head>
<body>
<div class="d1">
<img src="1.jpg"/>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<img id="img" src="xxxx" />
<img id="2wm" src="xxxx2wm" style="width:400px;height:400px;visibility:hidden;" />
<script src="jb/jquery-1.10.2.js"></script>
<script type="text/javascript">
$("#img").mouseenter(function () {
$("#2wm").css("top", window.innerHeight / 2 - document.getElementById("2wm").clientHeight / 2).css("left", window.innerWidth / 2 - document.getElementById("2wm").clientWidth / 2).css("visibility", "visible");;
}).mouseleave(function() {
$("#2wm").css("visibility", "hidden");;
})
</script>
<img id="2wm" src="xxxx2wm" style="width:400px;height:400px;visibility:hidden;" />
<script src="jb/jquery-1.10.2.js"></script>
<script type="text/javascript">
$("#img").mouseenter(function () {
$("#2wm").css("top", window.innerHeight / 2 - document.getElementById("2wm").clientHeight / 2).css("left", window.innerWidth / 2 - document.getElementById("2wm").clientWidth / 2).css("visibility", "visible");;
}).mouseleave(function() {
$("#2wm").css("visibility", "hidden");;
})
</script>
更多追问追答
追问
这个不行，一打开就将文字撑开了，虽然是空白，
追答
不明白什么意思，二维码不是另一张图片吗？难道您说的是产品和二维码是在同一个img中？
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
