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

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

当前标题如下所示：

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

倾斜的div将为标题和副标题文本提供渐变背景。我试图使用CSS伪选择器

：：before

标记创建graient div

我的问题是文本实际上包含在一个

容器中，该容器设置了包含div的宽度

我正在尝试将
夏季销售
div背景设置为左侧浏览器窗口边缘，但要尽量靠近左侧浏览器窗口边缘。这就意味着它必须从集装箱里钻出来。我想对
分标题
文本做同样的处理

我还发现，目前
夏季销售的宽度
跨越了包含div的整个宽度，如图所示。我不想要这个。我希望它只涵盖
夏季促销
文本的宽度

以下是我的代码片段：

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>

#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
}

我考虑过设置
#页眉bg h1:：before
标记的宽度，但是我不能这样做，因为文本会改变，我可以；我不知道宽度是多少

任何帮助都将不胜感激。
将
h1
更改为
显示：内联块
和
宽度：自动
，这样它就不会全宽运行，您的
：before
也应该根据文本宽度进行调整我不知道您是否在charlietfl建议之后对您的站点进行了任何更改，但是根据站点中的当前代码，您不需要将
h1
设置为
display:inline block
和
width:auto
，因为
h1
和
.subheader
已经向左浮动。（根据你上一次的评论，看起来确实是这样。）

倾斜渐变元素不会扩展到窗口左边缘的原因是
.container
元素已设置了
padding:0 90px
集（这意味着在左侧和右侧有一个90px的
padding
）。我们可以很容易地删除或覆盖此设置以解决问题，但这将导致在您的网页中发生大量对齐更改。因此，最简单的选择是向
h1
和
元素添加一个负
左
位置（等于填充），如下所示：

#页眉bg.副标题，
#页眉bg h1{
左：-90px；
}

或者，您也可以使用
transform:translate（…）
将
h1
和
.subheader
向左移动与
.container
上的填充相同数量的像素。一般来说，我更喜欢定位方法，因为较旧的浏览器不支持
变换
，但由于您已经在使用倾斜变换，这两种方法都可以

#页眉bg.副标题，
#页眉bg h1{
转换：转换（-90px）；
}

我没有添加任何演示，因为有相当多的设置需要从实际网页复制。
太好了，谢谢@charlietfl。用于包含主标题文本的宽度。现在我对副标题宽度有一个问题。我无法将其显示为
display:inline block
，因为它与标题位于同一位置。我不得不更改
.subheader{display:block}
使其位于标题下。有没有关于如何使渐变在左侧窗口上齐平的想法？更容易通过一个实时演示来帮助您在浏览器开发工具中修改css扫描您可以看到横跨整个divan宽度的副标题渐变？在h1上的
之后，如果我同时设置这两个元素，
h1
和
.subheader
至
浮动左
的宽度正确。我仍然无法让梯度扩展到左窗边缘。很棒的解决方案@Harry。谢谢你的帮助