Question

我一直试图通过外部链接使背景图片的一部分可点击。我已经尝试过使用来自此处已归档查询的“ imagemap”标签的一些建议，但是没有运气。我猜这是由于背景图片是在CSS中设置的，以及网站的性质。

我只有基本的编码知识，所以对我来说这是一个反复试验的方法，这非常耗时，现在我已经用尽了所有的试验方法。

下面是页面的图像。 “ HERE”区域（在“ Book Now”下）应为可点击区域。

CSS

body {
height: 100%;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url(../images/bg_2019_2.jpg) center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="https://www.facebook.com/2008/fbml">
  <meta property="og:url" content="http://www.athleticum.co.uk"/>
  <meta property="og:type" content="website"/>
  <meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
  <meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
  <meta property="og:description" content="Spinning® and functional equipment training." />
  <meta property="fb:app_id" content="693292167509917"/>  

<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">

<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>

    <!-- First Screen -->
<section class="screen-section section-1">
    <div class="section-inner">
        <header id="site-header">
            <!-- To change site subtitle just write any text between <h3>...</h3> -->
            <h3 id="site-subtitle"></h3>
        </header>

        <footer id="site-footer">
            <ul id="site-social">
                <li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">         
                </i></a></li>
                <li><a href="https://twitter.com/SpinningUK_IRE" target="_blank"><i class="icon-social_twitter_square"></i></a></li>
                <li><a href="https://www.instagram.com/explore/tags/spinningukandireland" target="_blank"><i class="icon-social_instagram_square"></i></a></li>
            </ul>
            <div class="scrolldown">
                <span class="keyscroll">
                    <span class="scrolldown-title">Use Up &amp; Down Keys</span>
                    <span class="key-up"><i class="icon-angle-up"></i></span>
                    <span class="key-down"><i class="icon-angle-down"></i></span>
                </span>
                <span class="label-or">or</span>
                <span class="mousescroll">
                    <span class="scrolldown-title">Scroll down</span>
                    <i class="scroll-icon"></i>
                </span>
            </div>
        </footer>
    </div>
</section>

Answer 1

<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
width:1646px;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url('https://i.stack.imgur.com/Y5nhJ.jpg') center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
</style>
</head>
<body>

<img src="https://i.stack.imgur.com/Y5nhJ.jpg" width="1646px" height="auto" usemap="#image-map">

<map name="image-map">
<area target="_self" alt="Book Now" title="Book Now" href="www.athleticum.co.uk" coords="1544,1241,2032,1393" shape="rect">
</map>

</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="https://www.facebook.com/2008/fbml">
  <meta property="og:url" content="http://www.athleticum.co.uk"/>
  <meta property="og:type" content="website"/>
  <meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
  <meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
  <meta property="og:description" content="Spinning® and functional equipment training." />
  <meta property="fb:app_id" content="693292167509917"/>  

<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">

<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>

    <!-- First Screen -->
<section class="screen-section section-1">
    <div class="section-inner">
        <header id="site-header">
            <!-- To change site subtitle just write any text between <h3>...</h3> -->
            <h3 id="site-subtitle"></h3>
        </header>

        <footer id="site-footer">
            <ul id="site-social">
                <li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">         
                </i></a></li>
                <li><a href="https://twitter.com/SpinningUK_IRE" target="_blank"><i class="icon-social_twitter_square"></i></a></li>
                <li><a href="https://www.instagram.com/explore/tags/spinningukandireland" target="_blank"><i class="icon-social_instagram_square"></i></a></li>
            </ul>
            <div class="scrolldown">
                <span class="keyscroll">
                    <span class="scrolldown-title">Use Up &amp; Down Keys</span>
                    <span class="key-up"><i class="icon-angle-up"></i></span>
                    <span class="key-down"><i class="icon-angle-down"></i></span>
                </span>
                <span class="label-or">or</span>
                <span class="mousescroll">
                    <span class="scrolldown-title">Scroll down</span>
                    <i class="scroll-icon"></i>
                </span>
            </div>
        </footer>
    </div>
</section>
</body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
width:1646px;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url('https://i.stack.imgur.com/Y5nhJ.jpg') center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
.booknow{
background-color:green; /* remove this property once you set the position and uncomment below to make it transparent*/
/*background-color:transperant;*/
position:relative;
left:200px;
top:250px;
width:180px;
height:65px;
display:inline-block;

}
</style>
</head>
<body>



</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="https://www.facebook.com/2008/fbml">
  <meta property="og:url" content="http://www.athleticum.co.uk"/>
  <meta property="og:type" content="website"/>
  <meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
  <meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
  <meta property="og:description" content="Spinning® and functional equipment training." />
  <meta property="fb:app_id" content="693292167509917"/>  

<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">

<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>

    <!-- First Screen -->
<section class="screen-section section-1">

    <div class="section-inner">
        <header id="site-header">
            <!-- To change site subtitle just write any text between <h3>...</h3> -->
            <h3 id="site-subtitle"></h3>
        </header>

        <footer id="site-footer">
            <ul id="site-social">
                <li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">         
                </i></a></li>
                <li><a href="https://twitter.com/SpinningUK_IRE" target="_blank"><i class="icon-social_twitter_square"></i></a></li>
                <li><a href="https://www.instagram.com/explore/tags/spinningukandireland" target="_blank"><i class="icon-social_instagram_square"></i></a></li>
            </ul>
            <div class="scrolldown">
                <span class="keyscroll">
                    <span class="scrolldown-title">Use Up &amp; Down Keys</span>
                    <span class="key-up"><i class="icon-angle-up"></i></span>
                    <span class="key-down"><i class="icon-angle-down"></i></span>
                </span>
                <span class="label-or">or</span>
                <span class="mousescroll">
                    <span class="scrolldown-title">Scroll down</span>
                    <i class="scroll-icon"></i>
                </span>
                <span class="booknow" onclick="location.href='www.athleticum.co.uk'">Book now</span>
            </div>

        </footer>
    </div>
</section>

如何使背景图像的一部分成为可点击的链接

2 个答案: