从容器中设置背景

问题描述：

我正在用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您可以设置背景。 –

答

如果您可以添加一些标记到上面写的标记，您可以扩展该部分，并给内容一个较小的框。因此，鉴于此代码：

<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添加到body，html或两者中，或者添加一些内部元素即可。你会摆脱它。

答

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

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

这将改变容器的背景，因此它将具有容器的宽度。我想给全宽背景... –

请分享您的网站链接 –

http://tomas-nosek-testovaci.mzf.cz/skalni-mesto/ - 灰色部分应在全宽灰色@Shital Marakana –

答

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

从容器中设置背景

相关推荐