[英]Text over image and CSS always centered image
我正在使用以CSS为中心的书籍图像,并且需要在书籍的两个相对的“页面”上以列的形式显示两个文本区域。
我还希望在这些文本区域中添加JavaScript,以便可以通过页面底部的“下一步”和“后退”按钮进行更改。
我有一个示例页面 ,您可以查看。
这是页面的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;
}
我还想在图片附近或上方放置两个按钮。 他们会说“下一个”和“上一个”,并链接到该书的下一页和上一页。
如果有更简便的方法,请告诉我。
无论如何,谢谢。
在图像上放置一个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的大小以匹配兄弟图像的宽度和高度。
您需要使用分配给图像的加载方法来获取加载时的实际尺寸。 您可以在此处搜索“图像加载事件”来找到样本。
为什么不创建两个跨度?
<span class="left-page-text"></span>
<span class="right-page-text"></span>
对于CSS
span{
float: left;
width: 50%; }
如果您想为每个页面提供更多自定义内容,请使用添加到它们中的类。 我希望这能帮到您。
所有人都知道我接受了您的两个想法(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%;
}
再次非常感谢你们俩。 现在我知道了,其他所有人都知道。 我将要写另一本书,但以卷轴的形式写给我妻子的诗。 非常感谢你们!
PS问题是我没有在div的lmao中使用div的内部。 它只是让我无所适从,而且在css span调用内调用图像不是一个好主意。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.