Question

我有一个横幅，我试图在其底部添加文字。我将文本置于中心位置以及我想要的方式，但是当我想将文本移动到页面底部时，图片也会移动。

HTML

<div class="col_one art-banner">
        <div class="art-banner-text">
            <h2>what do <span>you</span> want to learn?</h2>
        </div>
</div>

CSS

.art-banner { background-image: url("graphics/art_banner.jpg"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { text-align: center; padding-top: 10px; font-family: "Bender";}
.art-banner-text span { color: #eb6623; }

JSFiddle

Answer 1

假设您正在尝试使用margin-top向下移动艺术横幅文字，您将遇到崩溃边距问题：内部div和外部div之间共享边距，这意味着外部也获得了保证金。

因此，解决方案不是使用边距，而是position:relative用于外部div，position:absolute用于内部div，bottom:0将其定位在外部div的底部。

.art-banner {
  background-image: url("https://photos-2.dropbox.com/t/2/AAAtS4UXAnyf0x4vH0ty5lE779vFfS2smjUWyJFsFwnMPg/12/18401260/jpeg/32x32/1/1437685200/0/2/art_banner.jpg/COyP4wggASACIAMgBCAFIAYgBygBKAIoBw/L9JVtmzn-g-n3CMbDujkZkXxzuwR9ntwvtEoBLNl_4g?size=1024x768&size_mode=2");
  height: 150px;
  position: relative;
}
.art-banner-text {
  width: 940px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
}
.art-banner-text h2 {
  text-align: center;
  padding-top: 10px;
  font-family: "Bender";
  margin: 0;
}
.art-banner-text span {
  color: #eb6623;
}

<div class="col_one art-banner">
  <div class="art-banner-text">
    <h2>what do <span>you</span> want to learn?</h2>
  </div>
</div>

（请注意，我必须更改图片的URI，以使其显示。您所拥有的是显示图像的Dropbox页面的URI，而不是图像本身。）

Answer 2

您需要将外部容器（.art-banner-text）设置为position：relative;并将内部div或元素设置为absolute以将其放置在您想要的位置。 https://jsfiddle.net/2ryrnxz7/

<div class="col_one art-banner">
        <div class="art-banner-text">
            <h2>what do <span>you</span> want to learn?</h2>
        </div>
</div>

CSS

.art-banner { background-image: url("https://www.dropbox.com/s/migdkqlmse8ym0t/art_banner.jpg?dl=0"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; position: relative; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { font-family: "Bender"; margin: auto 0; padding:0px; bottom:0px; position:absolute; left:35%}
.art-banner-text span { color: #eb6623; }

您可以将左侧设置为您希望向中间推送的％。这不适用于移动设备，因为它已设置，不会重新定位页面。但是如果你只是需要它来为桌面工作，这就是如何做到的。

Answer 3

听起来你可能想要使用CSS定位。例如.art-banner {position: relative;} .art-banner-text {position: absolute;}然后，您可以在内部div中定位，移动或设置动画，而不会影响外部div。

在图像上移动文本，而不移动图像

3 个答案: