从容器中设置背景

Question

我正在用 wordpress 建立一个网站。主题为所有页面设置了一个容器来设置宽度。我想将文本保持在容器宽度内，但将<div> 的背景设置为屏幕的全宽。

<div style="width: 100%; background-color: gray; background-size: 100%;">
<b>Malé tiské stěny</b><span style="font-weight: 400;">
</span><span style="font-weight: 400;">Na okruhu Malými stěnami čeká na návštěvníky devatenáct skalních útvarů. Za jejich poznáním vede značená cesta ze Skalního náměstí, která směřuje k Janusově hlavě, kde se trasa dělí. Okruh míří ke skalní soutěsce, kterou stoupá k Západní vyhlídce s výhledem na věže Velkých stěn, Tisou a Děčínský Sněžník. Následuje cesta soutěskou a pokračuje kolem Zpovědnice k Lesní bráně, Kazatelně a Kamennému stolu. Poté se objeví Herkules, Jeskyně Oblud, sluj Proviantura, Švédský tábor a masiv Hradu, který lze zdolat sestupem po schodech, nebo jej pohodlněji obejít po úpatí. Cesta vpravo do strže směruje ke schodišti, ze kterého se nabízí pohled na zaklíněný balvan Zvon. Další vyhlídka přibližuje Krušné hory a Rájecké skály. Stezka při úpatí Malých stěn se vine směrem k Bradavičnímu kameni, míjí Tunel a při pohledu zpátky nabídne pohled na Sloní nohu. Kolem Kuřích nožek vede k věži s Průlezem a odhalí dva Úly. V závěru se trasa vrací pohodlnou cestou na Skalní náměstí.</span>
</div>

这只会为容器提供背景。有没有办法在不触及主题本身的情况下设置全宽背景？

Answer 1

如果您可以在上面编写的内容中添加一些标记，则可以扩展该部分并为内容提供一个较小的框。所以，给定这段代码：

<div class="wide-section">
   <div class="content-box">
     <b>Malé tiské stěny</b><span style="font-weight: 400;">
     </span><span style="font-weight: 400;">Test content.</span>
   </div>
</div>

您可以使用以下方法将您的特殊部分扩展到主要内容宽度之外：

.wide-section{
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background-color: grey;
}

然后给你的内容一个更小的盒子，像这样：

.content-box{
  margin: 0 auto; // center in some way if you need to
  width: [the width you need];
}

如果您发现浏览器在某些时候具有水平滚动条，只需将overflow-x:hidden 添加到正文、html、两者或某些内部元素即可。你会摆脱它。

Answer 2

::before 和/或::after。不要忘记使用content: " "

Answer 3

根据您的默认类名，您可以添加自定义 css。
例如：

<style type="text/css">
   #hs-content .hs-container{ background-color: gray;}
</style>