我正在制作epub3固定布局。基本上它是一个HTML / CSS绝对定位。
我试图将图片链接到网站,但链接不起作用。它只适用于第三张图片(img.seed)。
例如,它无法在Chrome或Firefox中运行。
以下是代码段:
@font-face { font-family: "Source"; src: url("../fonts/Source.ttf"); }
body {
width: 800px;
height: 800px;
margin: 0;
background-color: #ffffff;
}
img {
position: absolute;
margin: 0;
z-index: -1;
height: auto;
width: auto;
}
p {
position: absolute;
z-index: 10;
margin: 0;
padding: 0;
font-family: "Source";
}
img.seed { top: 15.88%; left: 63.77%; }
img.bacteria { top: 15.39%; left: 7.32%; }
img.bee { top: 15.19%; left: 35.45%; }

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=800, height=800" />
<title>Tittle</title>
<link href="../Style/style.css" type="text/css" rel="stylesheet" />
</head>
<body epub:type="backmatter bibliography">
<a href="http://www.booksbeck.com/travelling-seeds"><img class="seed" src="../Image/P999_seed.jpg" alt="page 23" /></a>
<a href="http://www.booksbeck.com/bees-like-flowers"><img class="bee" src="../Image/P999_bee.jpg" alt="page 23" /></a>
<a href="http://www.booksbeck.com/meet-bacteria"><img class="bacteria" src="../Image/P999_bacteria.jpg" alt="page 23" /></a>
</body>
</html>
&#13;
答案 0 :(得分:1)
https://jsfiddle.net/chuux72f/
body {
width: 800px;
height: 800px;
margin: 0;
background-color: #ffffff;
}
a {
position: absolute;
}
a.seed {
top: 15.88%;
left: 63.77%;
}
a.bacteria {
top: 15.39%;
left: 7.32%;
}
a.bee {
top: 15.19%;
left: 35.45%;
}
删除你的z-index并定位锚标签,而不是imgs