Question

下图显示了我正在尝试创建的网站布局。蓝色部分（右下角）表示图像应位于三个相邻元素的后面并略微溢出。

我不知道这样做的最好方法，当我在彩色部分有一个包装div并在那里放一个背景图像但我不确定这是否是最好的方法，因为包装div需要有一个固定的大小。

非常欢迎任何建议。

http://www.gumpshen.com/images/layout.png

Answer 1

如果我理解正确，这是我的答案：

如果灰色是标题，请按照您的意愿对待它。

然后有一个包含黄色，红色，绿色和蓝色的“内容”div，它应该相对定位。从那里你可以绝对定位蓝色，使其重叠黄色，红色和绿色。然后使用一些z-indexing，你应该得到你需要的东西。

Answer 2

是固定宽度吗？如果是这样，你可以用背景图片做一些作弊。如果用和固定高度修复它，那就更好了 - 只需将整个图像保存为背景。

您还可以为图像提供背景图像，如下所示：

#MyImage {
  padding: 20px 0 0 20px;
  background: url(images/image-background.jpg) top left no-repeat;
}

然后图像将位于中间，背景显示在边缘周围。那么你的图像可以是200x100px，背景图像是220x120px。

Answer 3

我将假设您已经找到了彩色块。

现在，您可以将原始图像作为背景放在蓝色框中，位于右下角，并在您的包装器的右下角绝对定位该图像的半透明版本（或使用css透明度）。原始顶部的半透明图像不会显示，它只会显示在周围的框中。

Answer 4

使用相对定位来定位元素，不要忘记将正确的Z-Index值设置为要放在顶部的div。

Answer 5

这应该是你需要的......

你的CSS应该是这样的：

    <!-- add CSS Reset before this -->

#header {
    background-color:#888;
    height:100px;
}

#content {
    position:relative;
    float:left;
}

#topleft {
    position:relative;
    float:left;
    width:50%;
    background-color:yellow;
    z-index:3;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    min-height:100px;               
}

#topright {
    position:relative;
    float:left;
    width:50%;
    background-color:red;
    z-index:3;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    min-height:100px;               
}

#bottomleft {
    position:relative;
    float:left;
    width:50%;
    background-color:green;
    z-index:3;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    min-height:100px;               
}

#bottomright {
    position:absolute;
    left:49%;
    bottom:0;
    width:50%;
    padding:20px 0 0 17px;
    background-color:blue;
    z-index:2;
    min-height:100px;               
}

您的HTML应如下所示：

<div id="header">
    <h1>Header</h1>
</div>
<div id="content">
    <div id="topleft">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div id="topright">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div id="bottomleft">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div id="bottomright">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

注意：“lorem ipsum”，为展示添加了不透明度和最小高度：）

CSS定位拼图

5 个答案: