Question

所以，我正在使用bootstrap轮播制作幻灯片。我希望图像内部有按钮，而不是图像外部的按钮。代码如下，您必须将其放在一个名为photo1.jpg photo2.jpg和photo3.jpg的图像文件夹中。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Graphic design</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, intial-scale-1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <style>
        .carousel-inner > .item > img,
        .carousel-inner > .item a > img {
            width:70%;
            margin: auto;
        }
        </style>
    </head>
    <body>

    <div class="container-fluid">
        <h1>Carter Goff Graphic Design</h1>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div>
                    <ul class = "nav navbar-nav">
                        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
                        <li><a href="#">About</a></li>
                        <li><a href = "#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class = "container">
        <br>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class = "active"></li>
                <li data-target="#myCarousel" data-slide-to="1"</li>
                <li data-target="#myCarousel" data-slide-to="2"</li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="photo1.jpg" alt="photo" width="500">
                </div>

                <div class="item">
                    <img src="photo2.jpg" alt="photo" width="500">
                </div>

                <div class="item">
                    <img src="photo3.jpg" alt="photo" width="500">
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class = "glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class = "sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class = "glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class = "sr-only">Next</span>
            </a>

    </body>
</html>

谢谢！

Answer 1

你可以用绝对定位来做，或者你可以把元素的背景作为你的照片，然后你就可以把它放在它上面了：

.item1{
  background: url(pathtothebackground);
  //any other css for your item
 }

Bootstrap Carousel与图像内的按钮

1 个答案: