将图片的标题叠加到幻灯片的图片上
将图片的标题叠加到幻灯片的图片上
提问于 2016-06-16 15:22:54
我有一个工作幻灯片与下一个和以前的按钮，我试图与css工作，以获得描述和标题中的图像，如这样的http://imgur.com/1WpiLYY。我在网上发现的是把图片放到背景中，但我不知道如何用幻灯片来实现。
HTML
<html>
<head>
<link href="gallery.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
<title></title>
</head>
<body>
<p>dog</p>
<form action="gallery.php" method="post">
<div class="prev">
<input name="action" type="submit" value="Previous">
</div>
<div class="prev">
<input name="action" type="submit" value="Next">
</div><input name="i" type="hidden" value="1">
<div class="description">
<p>dog</p>
<p></p>
<a href="?index=<br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Use of undefined constant php - assumed 'php' in on line <i>161</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0094</td><td bgcolor='#eeeeec' align='right'>245920</td><td bgcolor='#eeeeec'>{main}( )</td><td bgcolor='#eeeeec'>.../gallery.php<b>:</b>0</td></tr>
</table></font>
">next</a>-->
</form>
</body>
</html>CSS
img {
height: 250px;
width: 450px;
display:inline-block;
}
/*div.img {
border: 5px solid black;
display: inline-block;
position: relative;*/
/*width: 450px;
height: 250px;*/
/*opacity: 0.6;
filter: alpha(opacity=60);*/
/*}*/
div.description {
color:blue;
}
div.prev {
text-align: left;
}
div.next {
margin-left:400px;
margin-top:0px;
}PHP
//if ($result->num_rows > 0) {
// output data of each row
$pic_array = array();
$titles = array();
$descriptions = array();
while ($row = $result->fetch_assoc()) {
$pic_array[$count] = $row['pic_url'];
$titles[$count] = $row['title'];
$descriptions[$count] = $row['description'];
$count++;
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_POST['action'] == 'Previous') {
$index = $_POST['i'];
if ($index == 0) {
$index = count($pic_array) - 1;
echo "<p> $titles[$index] </p>";
echo "<img src= ".$dir.$pic_array[$index]." />";
}
else {
$index--;
echo "<p> $titles[$index] </p>";
echo "<img src= " . $dir . $pic_array[$index] . " />";
}
echo '<form action="gallery.php" method="post">
<input type="submit" name="action" value="Previous">
<input type="submit" name="action" value="Next">';
echo "<input type='hidden' name='i' value= '$index'' >";
echo "<p> $descriptions[$index]";
}
if ($_POST['action'] == "Next") {
$index = $_POST['i'];
if ($index == count($pic_array) - 1) {
$index = 0;
echo "<p> $titles[$index] </p>";
echo "<img src= ".$dir.$pic_array[$index]." />";
}
else {
$index++;
echo "<p> $titles[$index] </p>";
echo "<img src= " . $dir . $pic_array[$index] . " />";
}
echo '<form action="gallery.php" method="post">
<input type="submit" name="action" value="Previous">
<input type="submit" name="action" value="Next">';
echo "<input type='hidden' name='i' value= '$index' >";
echo " $descriptions[$index]";
}
} else {
$index = 1;
echo "<p> $titles[$index] </p>";
echo "<img src= ".$dir.$pic_array[$index]." />";
echo '<form action="gallery.php" method="post">
<div class="prev">
<input type="submit" name="action" value="Previous">
</div>
<div class="prev">
<input type="submit" name="action" value="Next">
</div>';
echo "<input type='hidden' name='i' value= '$index' >";
echo "<div class='description'
<p> $descriptions[$index] </p>
</div>";
}
$conn->close();
?>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-16 15:44:34
要使文本覆盖图像，需要将文本绝对定位在已应用position: relative;的容器中。这个容器元素应该是幻灯片标记的外部元素之一。
为什么？如果您不这样做，文本覆盖可能在您的页面上的任何地方结束。
下面是基本的例子。
<div class="slide">
<img src="http://placehold.it/600x250">
<div class="slide-caption">
<h3 class="slide-title">Slide Title</h3>
<p>
Slide caption. Slide caption. Slide caption. Slide caption. Slide caption. Slide caption.
</p>
</div>
</div>.slide {
display: inline-block;
position: relative;
}
.slide img {
display: block;
max-width: 100%;
}
.slide-title {
margin: 0 0 1rem;
}
.slide-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
color: white;
background-color: rgba( 0, 0, 0, 0.5 );
}演示JSFiddle。
我们的.slide元素有display: inline-block;，所以不管图像大小如何，它都能很好地包装我们的图像。这样，.slide与图像大小相同。.slide对其应用了position: relative;，因此任何绝对定位的元素都保留在该元素中。
标题放置的神奇之处在于我们的.slide-caption容器元素的绝对定位。bottom: 0;把它吸到它的父元素.slide的底部。right: 0; left: 0;将其扩展到.slide的全部宽度。
有很多方法可以实现覆盖文本。这是一种方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37863321
复制相关文章
相似问题
腾讯云开发者
