Question

我正在制作epub3固定布局。基本上它是一个HTML / CSS绝对定位。

我试图将图片链接到网站，但链接不起作用。它只适用于第三张图片（img.seed）。

例如，它无法在Chrome或Firefox中运行。

以下是代码段：

＆＃13;

@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%; }

＆＃13;

<?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;

Answer 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

HTML / CSS图像链接不适用于绝对定位

1 个答案: