CSS定位图像和文本

Question

我想在两张图片之间找到一些文字。图像定位正确，但有一些奇怪的设计问题正在出现。

Current Page（网页）

Design Plan（jpg）

我想弄清楚的是：

1. 背景必须在右图像（女孩）的右边缘之前停止
2. 背景必须扩展右图像的高度
3. 右图像左下角的垂直条。
4. 垂直条之前的文本换行
5. 位于中心底部文本左侧的栏

任何帮助将不胜感激！

Answer 1

正如艾登建议的那样，我建议不要分割图像。这很麻烦，并不是一个现代化的方式。尝试这样的事情：

.top-pic {
    float: right;
    margin-top: -200px;
}

将margin-top分配更改为您想要的图像（以像素为单位）。剩下的唯一问题是缩放顶部文本div的宽度以适应图像。一种方法是将padding-right: 250px;左右设置为.top-text h1和.top-text h2。

Answer 2

这有点不对

    .top-pic {
    position: absolute;
    top: -5.7em;
    right: -1.5em;
    z-index: 1;
}

将此图像剪切为2张图像（标签旁边的标题中有一张，内容中有一张）。由于你的z-index，东西在下面浮动。

在你的CSS中。你想要的是一个非常基本的固定3-col布局，文本在中间。我会在这里指出你：

http://layouts.ironmyers.com/

http://www.csszengarden.com/

这就是CSS布局的完成方式。

Answer 3

如果您将顶部图片移到徽标上方并更改样式，则可以获得与您想要的效果类似的效果。

<div class="top-pic">
  <img src="index2_files/girlbird.png">
</div>
<div class="logo">
  <img src="index2_files/logo-center.png">
</div>

CSS更改

.top-pic {
    float: right;
    position: relative;
    top: -50px;
    right: -25px;
}