列明容器的背景

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];
}

如果您发现浏览器在某一点上具有水平滚动条，只需在主体、html、或某些内部元素中添加overflow-x:hidden即可。你会摆脱它的。

Answer 2

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

例如：

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

Answer 3

::before和/或::after。别忘了使用content: " "