Question

我有<div>左对齐的背景图片和一些文字。

我需要div（或内部div）才能有一些填充，所以文本将在背景图像旁边开始，而不是在它上面。有没有办法用CSS做到这一点？

这是fiddle和CSS：

.mydiv {
  background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
  background-position: left bottom;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #fff;
  width: 500px;
  height: 700px;
}

Answer 1

Flexbox和伪元素可以做到这一点... 假设我的意图是正确的。

我需要div（或内部div）有一些填充，所以文本将在背景图像旁边开始，而不是在它上面

基本上，内部div是父元素的100％高度，但文本之后的任何空间都被具有图像背景的伪元素占用。

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } .mydiv { background-repeat: no-repeat; background-color: white; width: 100vw; height: 100vh; } .mydiv div { display: flex; height: 100%; } .mydiv div:after { content: ''; background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312'); background-position: left bottom; background-size: contain; background-repeat: no-repeat; flex: 1; }

<div class="mydiv"> <div>My Text here</div> </div>

评论要求更新后
修订/替代

我希望文本从图像旁边开始（在背景图像的右侧），而不是在图像上。我想要图像背景的原因是因为我希望它是一个位于左下角的固定背景。我想要包含背景图像，因为我希望自动计算图像的宽度。

您需要更改结构并将图像内联

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mydiv { width: 100vw; height: 100vh; display: flex; } .imgdiv { height: 100%; } .imgdiv img { max-height: 100vh; max-width: 100%; } .textdiv { flex: 1 0 auto; }

<div class="mydiv"> <div class="imgdiv"> <img src="http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312" alt=""> </div> <div class="textdiv">My Text here</div> </div>

JSFiddle Demo

Answer 2

不需要2个div，你可以用一个非常简单的方式实现所有目标试试这段代码：

.mydiv {
    background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
    background-position: 0 0;
    background-size: 250px  auto;
    background-repeat: no-repeat;
    background-color: #fff;
    width: 500px;
    height: 700px;
    padding-left: 255px;
    text-align: left;
}

Answer 3

如果您希望文本不显示在背景图像上但在其下方，我有两个解决方案：

首先：

为背景图像使用单独的div，如

＆＃13;

.mydiv {
  background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
  background-position: left bottom;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #fff;
  width: 100vw;
  height: 100vh;
}

＆＃13;

<div class="mydiv"></div><div>My Text here</div>

＆＃13;

<强>第二

将以下CSS应用于包含文本的div。

＆＃13;

.mydiv {
  background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
  background-position: left bottom;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #fff;
  width: 100vw;
  height: 100vh;
}
#innerText {
  padding-top: 105vh;
}

＆＃13;

<div class="mydiv"><div id="innerText">My Text here</div></div>

＆＃13;

如何使用填充对齐背景图像？

3 个答案: