Question

我有三张背景图片，我希望它们在彼此的顶部。除此之外，我想手动放置它们而不仅仅是对齐。

我该怎么做？

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

-

.first {
  background: url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg") no-repeat;
  background-size: 100% 100%;
  height: 400px;
}

.second {
   background: url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
  background-size: 300px;
  height: 200px;
}

.third {
     background: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif") no-repeat;
  background-size: 80px;
  height: 100px;
}

Answer 1

您可以使用position:absolute将DIV置于彼此之上。然后你的DIV需要一个宽度才能看到。每个DIV现在都可以有一个z-index，您可以通过它来确定谁是最重要的。 See this fork of your pen

Answer 2

使用 CSS3 ，您可以将multiple backgrounds应用于元素。您还可以为每个背景设置自定义background-position。

第一个值是水平位置，第二个值是垂直位置。左上角为0％0％。右下角是100％100％。如果只指定一个值，则另一个值为50％。默认值为：0％0％

body, html {
  margin: 0;
  padding: 0;
}

div {
  width: 100%;
  height: 100vh;
  background-image: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif"),
                    url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif"),
                    url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg");
  background-size: 80px, 300px, cover;
  background-repeat: no-repeat;
  background-position: 50% 90%, 50% bottom, center;
}

<div></div>

Answer 3

试试这个：

<div id="container">
    <div id="main_image"></div>
    <div id="overlay_image"></div>
</div>


#container{
    position: relative;
    width: 200px;
    height: 200px;
}
#main_image{
    width: 100%;
    height: 100%;
    background: blue;
}
#overlay_image{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: red;
}

在您的情况下，您可能只需要更改

background : url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;

您还需要调整图像的像素。希望这有帮助

Answer 4

您可以使用css3为一个div使用多个背景，如下所示：

<!doctype html>
<html ng-app="lostsysApp">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="mainController">
        <div class="jumbotron text-center">
            <h1>Angular Test</h1>
        </div>
        <div class="col-sm-8 col-sm-offset-2 text-center">
            <div class="form-group">
                <input type="text" ng-model="nom" placeholder="Contact Name" class="form-control input-lg text-center" />
            </div>
            <div class="form-group">
                <input type="text" ng-model="telefon" placeholder="Phone Number" class="form-control input-lg text-center" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-lg" ng-click="addNom()">Añadir</button>
            </div>

            <div ng-repeat="n in names">
                <p>
                    {{n.nom}} ({{n.phone}})
                    <a href="#" ng-click="delNom(n.nom)">[X]</a>
                </p>
            </div>
        </div>
    </body>
</html>

上面的示例代码使用速记，但您也可以这样写：

background: 
url(3.png) 600px 10px no-repeat,  /* On top,    like z-index: 3; */
url(2.png) 100px 100px no-repeat,   /*            like z-index: 2; */
url(1.png) 50px 50px no-repeat;  /* On bottom, like z-index: 1; */

Learn more about multiple backgrounds.

如何将背景图像放在彼此的顶部？

4 个答案: