Question

我在WordPress主题中设置了一个自定义页面标题，它只显示一个背景图像和一些添加在图像顶部的自定义文本。

目前标题如下：

我想在背景图像上添加一个倾斜的背景条，使其看起来像这样：

倾斜的div会为标题和子标题文本提供渐变背景。我正在尝试使用CSS伪选择器::before标记创建标记div。

我的问题是文本实际上包含在Container div中，该div设置包含div的宽度。

我正在尝试将Summer Sale div背景设置为接近左侧浏览器窗口边缘。这意味着它必须打破容器。我想对subheader文字做同样的事情。

此外，我发现当前summer sale的宽度跨越包含div的整个宽度，如图所示。我不是在这之后。我希望它只跨越summer sale文本的宽度。

以下是我的代码段：

HTML代码

<div class="container">
    <div class="row">
        <div class="col span_6">
            <h1>Summer Sale</h1>
            <span class="subheader">Save big on selected products</span>
        </div>
    </div>
</div>

CSS代码

#page-header-bg h1::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 6px;
    background: rgba(0,0,0,0.4);
    border-color: rgba(0,0,0,0.5);
    border-right-width: 4px;
    border-right-style: solid;
    -webkit-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}
#page-header-bg h1::before, #page-header-bg .subheader::before {
    -webkit-transform: skew(20deg);
    -ms-transform: skew(20deg);
    transform: skew(20deg)
}
#page-header-bg h1::before, #page-header-bg .subheader::before {
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(60%, rgba(0,0,0,0.35)));
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
    background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000', GradientType=1 );
}
#page-header-bg .subheader, #page-header-bg h1 {
    position: relative
}
#page-header-bg .subheader::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    background: rgba(0,0,0,0.7);
    z-index: -1;
    padding: 0px 5px 5px 10px;
    border-radius: 6px
}

我考虑过设置#page-header-bg h1::before标签的宽度，但我不能这样做，因为文字会改变，我可以知道宽度是多少。

非常感谢任何帮助。

Answer 1

我不知道您是否在 charlietfl的建议后对您的网站进行了任何更改，但根据您网站中的当前代码，您无需将h1设置为{ {1}}和display: inline-block因为width: auto和h1已经浮动到左侧。（根据您的上次评论，看起来确实如此。）

倾斜渐变元素直到窗口左边缘扩展的原因是因为.subheader元素已设置.container（意味着，padding: 0 90px为90px在左边和右边）。我们可以轻松删除或覆盖此设置以解决问题，但这会导致您的网页中出现大量对齐更改。因此，最简单的选择是向padding和left元素添加负h1位置（等于填充），如下所示：

.subheader

或者，您也可以使用#page-header-bg .subheader, #page-header-bg h1 { left: -90px; }将transform: translate(...)和h1向左移动相同的号码。像素作为.subheader上的填充。一般来说，我更喜欢定位方法，因为旧版浏览器不支持.container，但由于您已经在使用偏斜变换，因此任何一种方法都应该没问题。

transforms

我没有添加任何演示，因为有很多设置需要从实际网页复制。

Answer 2

将h1更改为display:inline-block和width:auto，使其不会全宽，然后您的:before也应根据文字宽度进行调整

使用CSS3向DIV添加倾斜的背景

2 个答案: