我正在用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>


这样只会为容器提供背景。有没有办法设置整个宽度的背景而不触动主题本身?

最佳答案

如果您可以在上面编写的标记上添加一些标记,则可以扩展该部分并在内容上提供一个较小的框。因此,给出以下代码:

<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即可。您将摆脱它。

关于html - 设置容器外的背景,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45298690/

10-11 13:53
查看更多