[英]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.