【问题标题】:Setting background out of container从容器中设置背景
【发布时间】:2017-07-25 17:38:01
【问题描述】:

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

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

【问题讨论】:

  • 使用自定义css可以设置背景。

标签: html css wordpress


【解决方案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、两者或某些内部元素即可。你会摆脱它。

【讨论】:

    【解决方案2】:

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

    【讨论】:

      【解决方案3】:

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

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

      【讨论】:

      • 这将改变容器的背景,因此它具有容器的宽度。我想给全角背景...
      • 请分享您的网站链接
      • tomas-nosek-testovaci.mzf.cz/skalni-mesto - 灰色部分应该是全宽的灰色@Shital Marakana
      • 背景仍然不是全宽,而是限制在容器宽度...@Shital Marakana
      • 将此代码用于整个页面 #hs-page{ background-color: gray !important;}
      猜你喜欢
      • 1970-01-01
      • 2020-10-17
      • 2020-08-01
      • 1970-01-01
      • 1970-01-01
      • 2014-04-27
      • 1970-01-01
      • 2022-08-11
      • 2023-03-25
      相关资源
      最近更新 更多