html - 添加了全局宽度我希望一个特定元素超过该宽度限制

Question

我声明了一个全局宽度。但我想要一个特定的元素超过这个限制，但它似乎不起作用。它是带有背景图像的文本。我只希望背景图像超过该限制，但当我加宽元素时，文本也会超过宽度。

我尝试通过 width:150% 手动扩展元素的宽度，但文本也超出了限制

html, body {
    font-size: 1em;
    background: transparent;
    display: block;
    width: 1222px;
    margin: 0 auto;

}.wrapperbody {
    background-image:url("background.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    margin-top: 10%;
}

<div class="wrapperbody">
    <div>
        <h1>test</h1>
    </div>
</div>

我试图扩展文本的背景图像，但整个文本都被扩展了。

Answer 1

一个人永远不应该以这种方式组成页面，宽度应该声明为部分。这就是你不能正确设置背景的原因，以后你会遇到更多的麻烦。

无论如何，如果你仍然选择保留这样的布局，那么你必须做一些技巧如下:

html,
body {
    font-size: 1em;
    background: transparent;
    display: block;
    width: 200px;
    margin: 0 auto;
}

.wrapperbody {
    margin-top: 10%;
	position: relative;
}

.wrapperbody > * {
	position: relative;
	z-index: 1;
}

.wrapperbody::before {
	position: absolute;
	z-index: 0;
	content: '';
	display: block;
	top: 0;
	left: calc((100vw - 200px) / -2);
	right: calc((100vw - 200px) / -2);
	bottom: 0;
	background: none red;
}

<div class="wrapperbody">
    <div>
        <h1>test</h1>
    </div>
</div>

也在 this JSFiddle 上

再一次，请考虑更改布局。