对象遵循响应式背景图像 [英] Objects follow responsive background-image
问题描述
我试图制作一幅横幅图片，其中会包含兴趣点，您可以将其悬停以查看更多内容。这些点需要相对于背景图像具有固定的位置。如果background-image有一个静态大小，这是很容易的，但是这需要通过background-size：cover来响应。
我试过了它们都以像素和百分比来定位它们，但是由于background-size：cover会改变图像的高度和高度，所以这变得困难。任何人都可以解决这个问题吗？
我会插入一个小小的Jsfiddle，以便了解我的意思：
https://jsfiddle.net/jynf21kw/1/
body {margin：auto; text-align：centeR; } .background {} .bg {background-size：cover;高度：500像素;位置：相对;溢出：隐藏; } .poi {height：50px;宽度：50像素;位置：绝对的; } .poi：在{font-family：FontAwesome;内容：\f067;颜色：绿色; font-size：30px;}
<！doctype html> ;< html lang =no>< head> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css> < script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js>< / script> <风格> < /风格>< /头><身体GT; < header id =headerclass =header> < H1>页眉和LT; / H1> < /报头> < div class =background> < div class =bgstyle =background-image：url（'http://i.imgur.com/HmjQ2tj.jpg'）;> < div class =poi-container> < div class =poistyle =left：33％; top：33％;>< / div> < div class =poistyle =left：564px; top：497px;>< / div> < div class =poistyle =left：1132px; top：36px;>< / div> < div class =poistyle =left：1332px; top：336px;>< / div> < / DIV> < / div>< / div>< section class =other> < h2>其他内容< / h2>< / section>< / body>< / html>
我已经发现使用背景图像的不是是理想的，但是，相反，使用内联图像与 引脚位于顶部。
然后图像以通常的方式响应，并且引脚/标记可以完全相对于图像封装进行定位。
* {margin：0;填充：0; box-sizing：border-box;}。map {margin：10px; position：relative;}。map img {max-width：100％; display：block;}。box {width：5％;身高：5％; background-image：url（http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg）; background-position：top center;背景重复：不重复; background-size：包含; position：absolute;}＃pin-1 {top：25％; left：36％;}。box：hover> .pin-text {display：block;}。pin-text {position：absolute;顶部：50％; transform：translateY（-50％）;左：75％;白色空间：nowrap; display：none;}。pin-text h3 {color：white; text-shadow：1px 1px 1px＃000;}
< ; div class =map> < img src =http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpgalt =/> < div id =pin-1class =box> < div class =pin-text> < h3> My House< / h3> < / DIV> < / div>< / div>
I'm trying to make a banner image which will include "points of interests" that you can hover over to see more. These points need to have a fixed position relative to the background-image. This is of couse easy if the background-image has a static size, but this need to be responsive with the effect of background-size: cover.
I've tried positioning them both with pixels and percentage, but since background-size: cover alters both witdh and height of the image, this becomes difficult.
Anyone have any solution to this?
I'll inlude a little Jsfiddle so you can see what i mean:
https://jsfiddle.net/jynf21kw/1/
body{
margin:auto;
text-align: centeR;
}
.background{
}
.bg{
background-size:cover;
height:500px;
position: relative;
overflow: hidden;
}
.poi{
height:50px;
width:50px;
position:absolute;
}
.poi:after{
font-family: FontAwesome;
content: "\f067";
color:green;
font-size: 30px;
}
<!doctype html>
<html lang="no">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<header id="header" class="header">
<h1>Header</h1>
</header>
<div class="background">
<div class="bg" style="background-image: url('http://i.imgur.com/HmjQ2tj.jpg');">
<div class="poi-container">
<div class="poi" style="left:33%;top:33%;"></div>
<div class="poi" style="left:564px;top:497px;"></div>
<div class="poi" style="left:1132px;top:36px;"></div>
<div class="poi" style="left:1332px;top:336px;"></div>
</div>
</div>
</div>
<section class="other">
<h2>Some other content</h2>
</section>
</body>
</html>
I have found that not using a background image is ideal but,instead, using an inline image with pins positioned on top.
The image is then made responsive in the usual way and the pins / markers can be positioned absolutely in relation to the image wrapper.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
margin: 10px;
position: relative;
}
.map img {
max-width: 100%;
display: block;
}
.box {
width: 5%;
height: 5%;
background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 36%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 75%;
white-space: nowrap;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
这篇关于对象遵循响应式背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
