我正在尝试在div背景图像上叠加链接，但希望链接保持原位，因为我通过鼠标和缩小屏幕来测试屏幕宽度。网址为http://jandswebsitedesigns.com/test/index.html。你可以看到这里的链接在哪里＆＃34;是我想要的链接，并留在那里。在我看来，必须有一种比我设置txt-link类更好的方法。
<style>
.fixed {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: contain;
background-repeat: no-repeat; }
.txt-link {
font-size: 25px;
color: #ffffff;
position: absolute;
z-index: 2;
top: 55%;
left: 45%; }
</style>
<img class="fixed" src="images/RFYL-MainPageBanner.jpg">
<div class="txt-link">
<div>a link here</div>
</div>
答案 0 :(得分：1)
将ID image添加到您的图片中，添加ID为linkContent的div，其中包含您希望始终保留在图片上的链接
将此代码添加到您的页面
$(window).resize(function(){
$image = $("#image");
$link = $("#linkContent");
imageTop = $image.offset().top;
imageLeft = $image.offset().top;
imageWidth = $image.width();
imageHeight = $image.height();
linkWidth = $link.width()/2;
linkHeight = $link.height()/2;
$link.offset({top:(imageTop+imageHeight)/2 - linkHeight,left:(imageWidth+imageLeft)/2 - linkWidth});
})
仅供参考，这将是您的页面：
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Welcome to New Life Church in Corpus Christi, TX.</title>
<meta name="description" content="At New Life Church we are reaching for a stronger relationship with God and with others; resulting in together being God's expression of love,
hope and power in Corpus Christi, Texas!">
<meta name="keywords" content="bible-based teachings, spirit-filled worship, interdenominational church, develop a closer relationship with our Lord, outreach, outreach ministries, missions, water baptisms, sunday morning services, wednesday services, children and kids service, students, college students, experience God, sunday sermons, praise and worship, Christian teachings, life groups, mens, womens, marrieds, young adults, singles, city outreach, fellowship, biblical doctrine. ">
<meta name="Robots" content="index,follow">
<meta name="viewport" content="width=1100">
<meta name="format-detection" content="telephone=no">
<!-- this is for arrow up-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/default.css">
<!--fluid grid-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/layouts-common.css">
<link rel="stylesheet" media="(max-width: 640px)" href="css/max-640px.css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=160dpi,">
<style>
.fixed {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: contain;
background-repeat: no-repeat;
position: relative;
z-index: 1; }
</style>
</head>
<body <div="" id="main-wrapper">
<img id="image" class="fixed" src="images/RFYL-MainPageBanner.jpg">
<div id="linkContent" style="font-size: 25px; color: rgb(255, 255, 255); position: absolute; z-index: 2; top: 510px; left: 734px;">
<div>a link here</div>
</div>
<div class="scroll-top-wrapper">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-chevron-circle-up"></i>
</span>
</div>
<div id="footer">
<div id="footer-content">
<div class="container" style="margin: 0; padding: 35px 0 35px 0;" role="main">
<div class="c1" style="padding-bottom: 25px;">
<div style="float: left; width: 50%;">
<div id="site-map">
<p class="footer-hdr">Navigation</p>
<a href="index.html">Home</a><br>
<a href="im-new-here.html">I'm New Here</a><br>
<a href="sermons.html">Sermon Archive</a><br>
<a href="ministries.html">Ministries</a><br>
<a href="next-steps.html">Next Steps</a><br>
<a href="learn-more.html">Learn More</a><br>
<a href="contact.html">Contact</a><br>
<a href="give.html">Give</a><br>
</div>
</div>
<div style="float: left; width: 50%;">
<div id="site-map">
<p class="footer-hdr">About</p>
<a href="learn-more.html">Core Values</a><br>
<a href="beliefs.html">Beliefs</a><br>
<a href="the-team.html">The Team</a><br>
<a href="missions.html">Missions</a><br>
</div>
</div>
</div><!--close c1-->
<div class="c2">
<div style="float: left; width: 50%;">
<div id="site-map">
<p class="footer-hdr">Connect</p>
<a href="kids.html">Kids</a><br>
<a href="students.html">Students</a><br>
<a href="adults.html">Adults</a><br>
<a href="marrieds.html">Marrieds</a><br>
<a href="mens.html">Men's</a><br>
<a href="womens.html">Women's</a><br>
<a href="young-adults.html">Young Adults</a><br>
</div>
</div>
<div style="float: left; width: 50%;">
<div id="site-map" style="color: #979797; line-height: 150%;">
<p class="footer-hdr">Contact Info</p>
<span style="color: #ffffff;">Address</span><br>5801 McArdle Rd.<br>Corpus Christi, TX<br>78412<br><br>
<span style="color: #ffffff;">Church Office</span><br>Phone: (361) 992-9921<br>Fax: (361) 992-1355<br><br>
<span style="color: #ffffff;">Office Hours</span><br>Monday - Thursday<br>8:00am - 5:00pm
</div>
</div>
</div><!--close c2-->
</div><!-- close container-->
</div><!--end footer content-->
</div><!--end footer-->
<div id="bottom">
<div id="bottom-content">
<div class="s-container" role="main">
<div class="b1">
<div style="padding-bottom: 10px;">
© 2015 New Life Church. All Rights Reserved.
</div>
</div>
<div class="b2">
<div>
Site Designed and Maintained By: <a href="http://jandswebsitedesigns.com/" target="_blank">J & S Website Designs</a>
</div>
</div>
</div>
</div>
</div>
<div id="top-bar">
<div id="header">
<div id="menu-icon" class="menu-right"></div>
</div>
<div id="sidebar" style="z-index: 100; position: fixed; top: 0px; right: 0px; bottom: 0px; width: 275px; margin-right: -275px;"><div data-ssbplugin="sub-wrapper" style="width: 100%; height: 100%; overflow: auto;">
<div id="top-sidebar">Most Recent Sermon
<iframe style="padding-top: 20px;" width="222" height="125" src="http://www.youtube.com/embed/fhtSqq1Pxqk" rel="0" controls="1" showinfo="0" frameborder="0" allowfullscreen=""></iframe>
</div>
<div id="push-sidebar">
<ul class="list-unstyled">
<li><a href="index.html"><i class="fa fa-fw fa-home"></i>Home</a></li>
<li><a href="im-new-here.html"><i class="fa fa-fw fa-sign-in"></i>I'm New Here</a></li>
<li><a href="sermons.html"><i class="fa fa-fw fa-desktop"></i>Sermon Archive</a></li>
<li><a href="ministries.html"><i class="fa fa-fw fa-users"></i>Ministries</a></li>
<li><a href="next-steps.html"><i class="fa fa-fw fa-compass"></i>Next Steps</a></li>
<li><a href="learn-more.html"><i class="fa fa-fw fa-info-circle"></i>Learn More</a></li>
<li><a href="contact.html"><i class="fa fa-fw fa-envelope"></i>Contact</a></li>
<li><a href="give.html"><i class="fa fa-fw fa-heart"></i>Give</a></li>
</ul>
</div>
<div id="social">
<a href="https://www.facebook.com/summitcorpus" target="_blank"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="https://twitter.com/summitcorpus" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a>
<a href="https://instagram.com/summitcorpus/" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
</div></div>
<!-- this is for side bar menu-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><style type="text/css"></style>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="js/simpleslider/jquery.simplesidebar.min.js"></script>
<script>
$( '#sidebar' ).simpleSidebar({
settings: {
opener: '#menu-icon',
wrapper: '#main-wrapper'
},
sidebar: {
align: 'right',
width: 275,
closingLinks: 'a',
style: {
zIndex: 100
}
}
});
$(function(){
$(window).resize(function(){
$image = $("#image");
$link = $("#linkContent");
imageTop = $image.offset().top;
imageLeft = $image.offset().top;
imageWidth = $image.width();
imageHeight = $image.height();
linkWidth = $link.width()/2;
linkHeight = $link.height()/2;
$link.offset({top:(imageTop+imageHeight)/2 - linkHeight,left:(imageWidth+imageLeft)/2 - linkWidth});
})
})
</script>
<!-- end of side bar stuff-->
<!-- image map stuff-->
<script src="js/imagemap/ios-orientationchange-fix.min.js"></script>
<script src="js/imagemap/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
});
</script>
<!--end image map stuff-->
<script>
$(function() {
$(window).on("scroll", function() {
if($(window).scrollTop() > 100) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
});
</script>
<script>
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>
答案 1 :(得分：0)
如果我理解正确的话，那么 把img和文本放在一个带有poosition = relative的div中，所以链接对于这个div来说是绝对的，而不是对于它来说！
DEMO： http://jsfiddle.net/7tzvadb8/
HTML：
<div class="container">
<img class="fixed" src="http://jandswebsitedesigns.com/test/images/RFYL-MainPageBanner.jpg"/>
<div class="txt-link">
<div>a link here</div>
</div>
</div>
css：
.container {
position: relative;
width: 100%;
}
img.fixed {
width: 100%;
}
.txt-link {
font-size: 25px;
color: #ffffff;
position: absolute;
z-index: 2;
top: 55%;
left: 45%; }