Question

你好我试图在另一张背景图像上将一幅图像设置到中心底部。

图像包含一个（ktm）自行车背景图像和另一个位于中心底部的汽车图像。

我也尝试过背景位置属性作为中心底部，但仍然无法正常工作。我不知道该怎么做。我在评论框中提供了我正在尝试制作的图片，请参考该图片不要忽略。并提供了我的代码，我已经尝试过。请任何人都可以告诉我示例，我如何对不起，但我真的很新的层叠样式表。我需要使用绝对属性吗？

JSFiddle：jsfiddle.net/vr50vza2/1

.f4-pos {
  position: absolute;
  background-position: center bottom;
}

.footer {
  background-image: url("../images/footer.png");
}

.foot4 {
  background-image: url("../images/iauro-footer-logo.png");
}

.ban {
  height: 800px;
  background-size: 100% 100%;
}

.im3 {
  height: 100px;
  width: 300px;
}

.norep {
  background-repeat: no-repeat;
}

<div class="footer ban norep">
  <div class="foot4 f4-pos im3 norep"></div>
</div>

Answer 1

喜欢这个？我删除了一些不必要的CSS和图像，但您可以稍后返回。

＆＃13;

UseSimpleInjectorAspNetRequestScoping

＆＃13;

.footer {
  position: relative;
  border: 1px solid red;
}

.foot4 {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.ban {
  height: 500px;
}

.im3 {
  height: 100px;
  width: 200px;
  background-color: blue;
}

＆＃13;

Answer 2

请查看FIDDLE：https://jsfiddle.net/NayanaDas/jw3dqb71/

 xpath=//p[@class='Test']/span[1]

Answer 3

您可以使用CSS Flexboxes执行此操作。请参阅下面的代码。请注意，魔法在＃img2Container的CSS中。另请参阅JSFiddle。

<!doctype html>
<html>
    <head>
        <style type="text/css">
            html, body {
                margin: 0px;
                padding: 0px;
                height: 100%;
            }
            #img1 {
                width: 100%;
                height: 100%;
            }
            #img2Container {
                position: absolute;
                bottom: 0px;
                height: 100px;
                width: 100%;

                display: -webkit-flex;
                display: flex;
                -webkit-flex-direction: row;
                flex-direction: row;
                -webkit-justify-content: center;
                justify-content: center;
            }
            #img2 {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <img id="img1" src="http://lorempixel.com/600/600/" />
        <div id="img2Container">
            <img id="img2" src="http://lorempixel.com/100/100/" />
        </div>
    </body>
</html>

有理由相信你也可以将图像包装在另一个元素中并使用margin：0 auto。但是，由于CSS Flexbox的灵活性，我更喜欢这种方法，允许您将多个图像居中并使它们均匀居中。

请注意，img2Container的位置是绝对的，这意味着它会随页面滚动。如果您愿意，可以将其设置为粘性，以便保留在查看窗格中并将其定位到视图窗格而不是文档。

如何将一个图像设置到另一个背景图像的中心底部

3 个答案: