Question

我有一个带有下一个和上一个按钮的工作幻灯片，我正在尝试使用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();

?>

Answer 1

要使文本覆盖图像，您需要将文本绝对定位在已应用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 );
}

演示https://issues.scala-lang.org/browse/SI-2799。

我们的.slide元素具有display: inline-block;，因此无论图像的大小如何，它都会很好地包裹我们的图像。这种方式.slide与图像大小相同。 .slide已应用position: relative;，因此任何绝对定位元素都会保留在此元素中。

标题放置的神奇之处在于我们的.slide-caption容器元素的绝对定位。 bottom: 0;将其吸引到其父元素.slide的底部。 right: 0; left: 0;将其拉伸到.slide的全宽。

有多种方法可以实现叠加文字。这是一种方法。

获取图片的标题重叠在幻灯片的图片上

HTML

CSS

PHP

1 个答案: