Question

我正在为客户创建一个网站 - 我从未遇到过无法修复的问题，但经过3个小时的尝试和搜索后，我决定在这里提问。

所以，我在Photoshop中制作了一个模型。 Desired design

网格是我的主要内容/页面中心，但我希望标题只适合从左边（0px）到我的网格容器的末尾，并且最后还有一个“提示”（箭头））

我决定使用1x99px背景作为整个背景和提示的实际图像，主要是为了避免在图像上花费太多数据（因为页面将包含大量图像）

我已经给了它一个镜头，并做了一些HTML / CSS，但它要么以错误的布局结束（标题网格容器被错误地放置），阴影覆盖或尖端超过网格容器。

我的标题：

<div class="header_bg"></div>
    <header>
        <div class="header-content">
            <div class="grid-container">
                asdads
                <div class="header_arrow"></div>
            </div>
        </div>
    </header>

我的CSS：

header {
    height: 99px;
    overflow: hidden;
    width: calc(50% + 50%);
    position: relative;
}

.header_arrow {
    background: url(images/header_arrow.png) no-repeat;
    width: 144px;
    height: 99px;
    float: right;
    margin-right: -156px;
}

.header_bg {
    background: url(images/header_bg.png) repeat-x;
    height: 99px;
    position: absolute;
    width: 50%;
}

header .grid-container {
    height: 99px;
    background: url(images/header_bg.png) repeat-x;
}

它是如何出现的： Current design 红色框是网格容器

这几乎是我正在寻找的东西，但我希望结束/提示位于网格容器内，并且阴影要停止覆盖。

有什么想法吗？非常感谢你！

Answer 1

你可以给.grid-container一个等于.header_arrow宽度的右边距，并使其右边距等于其宽度

header .grid-container {
    height: 99px;
    background: url(images/header_bg.png) repeat-x;
    margin-right:144px;
}
.header_arrow {
    background: url(images/header_arrow.png) no-repeat;
    width: 144px;
    height: 99px;
    float: right;
    margin-right: -144px;
}

CSS：如何使用repeat-x背景和提示制作一个！100％标题

1 个答案: