Question

我正在使用以CSS为中心的书籍图像，我需要在本书的两个“页面”上显示两个文本区域作为列。

我还希望将这些文本区域添加到JavaScript中，以便可以通过页面底部的“下一步”和“后退”按钮进行更改。

我有example page你可以看一下。

以下是该页面的HTML：

<html>
  <head>
     <title>BookPopUp</title>
     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
     <meta http-equiv="Page-Exit" content="blendTrans(Duration=2.0)">
     <link rel="stylesheet" type="text/css" href="css/popup.css" />
   </head>
   <body background="images/bg.jpg">
     <div id="bookpop">
     <span></span>
     </div>
   </body>
</html>

以下是该页面的CSS：

/*website BookPopUp Image Center*/
#bookpop {
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    margin: -368.5px auto 0 -512px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of left margin: width of the image divide by 2 (ie: 260 / 2) */;
    width: 1024px; /* same as the image width */
}
#bookpop span {
    display: block;
    width: 1024px;
    height: 737px;
    margin: 0 auto;
    position: relative;
    background: transparent url(../images/bookpopup.png) 0 0 no-repeat;
    text-indent: -5000em;
    outline: 0;
}

我还想把两个按钮放在图片的顶部或顶部。他们会说Next和Back并链接到本书的下一页和前一页。

如果有更简单的方法，请告诉我。

无论如何，提前谢谢。

Answer 1

在图像上放置一个div，其比例和位置等于图像（覆盖图像）并将文本置于该div内。你需要有这样的布局：

<div class='container'>
    <div class='text'>I am the text</div>
    <img src='myimg.png'>
</div>

和CSS：

.container { position: relative; }
.container .text {position:absolute;top:0px;left:0px;
    margin:0px;padding:0px;text-align:center;}
.container img {margin:0px;padding:0px;}

并且加载的javascript将调整“.text”div的大小以匹配兄弟图像的宽度和高度。

您需要使用分配给图像的加载方法来获取加载时的实际尺寸。你可以在这里搜索“图像加载事件”找到样本。

Answer 2

为什么不创建2个跨度？

<span class="left-page-text"></span>
<span class="right-page-text"></span>

为css

span{
float: left;
width: 50%; }

如果您想为每个页面添加更多自定义内容，只需使用添加到它们的类。我希望这会对你有所帮助。

Answer 3

所以每个人都知道我接受了你的两个想法（tpaksu | Axente Paul）并将它们添加到我自己的版本中。这是代码，以便其他人可以确切地看到它是如何完成的。

HTML下面......

<!DOCTYPE html>
<html lang="en">
  <head>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <META NAME="ROBOTS" CONTENT="NONE">
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <title>BookPopUp</title>
  </head>
  <body background="images/bg.jpg">
    <div id="bookpop">
      <div>
        <span class="leftpagetext">Hello this is a text to see exactly where all of this is going to go!</span>
        <span class="rightpagetext">Trying to see where this goes as well! Hello this is a text to see exactly where all of this is going to go!</span>
        <img src='images/bookpopup.png'>
      </div>
    </div>
  </body>
</html>

CSS下面......

/*website BookPopUp Image Center*/
#bookpop {
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    margin: -368.5px auto 0 -512px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of left margin: width of the image divide by 2 (ie: 260 / 2) */;
    width: 1024px; /* same as the image width */
}
/* Span container class for text Left Side */
.leftpagetext {
    float: left;
    position: absolute;
    top: 120px;
    left: 100px;
    text-align: justify;
    width: 35%;
}
/* Span container class for text Right Side */
.rightpagetext {
    float: right;
    position: absolute;
    top: 120px;
    right: 100px;
    text-align: justify;
    width: 35%;
}

再次感谢你们两位。现在我知道了，其他所有人都知道这一点。我将要做另一本这样的书，但是以我的妻子诗歌的卷轴形式。非常感谢你们！

P.S。问题是我没有在div的lmao中使用div。它刚刚滑倒了我的脑海，并且调用css span调用内部的图像并不是一个好主意。

图像上的文字和CSS总是居中的图像

3 个答案: