Question

我为Hatch主题创建了一个子主题。我希望在背景中有一个固定的图像，并且白色背景跨越90％的宽度并与身体一起滚动。

问题：我无法在文本正文周围填充（它一直运行到边缘）

以下是该网站的链接：http://www.westonsnorwood.com

这是我在style.css表中尝试过的文字：

    /*
Theme Name: hatch-child
Theme URL: http://www.westonsnorwood.com
Description: Hatch Child Theme
Author: Weston Norwood
Template: hatch
*/
@import url('../hatch/style.css');

body{
 margin: 0 10;
 padding: 10px;
 }

.wrap {
 background: #f6f6f6;
 background-position: center center; 
 max-width: 80%;
 padding: 20;
}

body{
 background-image: url(http://www.westonsnorwood.com/wp-content/uploads/2016/04/woodgrainlight.jpg);
 background-position: center center;
 background-attachment: fixed;
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

非常感谢任何帮助！

Answer 1

问题在于您编写.wrap填充样式的方式。它没有被告知如何处理＆＃34; 20＆＃34;，所以你要做的就是把它变成20px。

最终代码：

    /*
Theme Name: hatch-child
Theme URL: http://www.westonsnorwood.com
Description: Hatch Child Theme
Author: Weston Norwood
Template: hatch
*/
@import url('../hatch/style.css');

body{
 margin: 0 10;
 padding: 10px;
 }

.wrap {
 background: #f6f6f6;
 background-position: center center; 
 max-width: 80%;
 padding: 20px; // turn it into 20px
}

body{
 background-image: url(http://www.westonsnorwood.com/wp-content/uploads/2016/04/woodgrainlight.jpg);
 background-position: center center;
 background-attachment: fixed;
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

Answer 2

将填充添加到主容器中。您的文本位于wrap容器内，并向主体添加填充推送wrap容器但不覆盖填充到{{ 1}}容器。如果您将wrap添加到padding: 50px;，那么您会注意到body容器的推送次数较多，而内容则不然。如果要推送内容，请将填充添加到wrap容器中。

wrap

注意：您已经在.wrap{ padding: 20px; }上填充，但在其中缺少.wrap单位，如另一个答案所示。

Answer 3

问题似乎是您留下了您的值的单位前缀（px），即

.wrap {
  padding: 20px;
}

同样在：

body{
  margin: 0 10px;
}

Answer 4

.wrap {
    background: #f6f6f6;
    background-position: center center; 
    max-width: 80%;
    padding: 20px;  <---------- You're missing the px unit
}

当我有分层背景时，如何在内容周围创建填充？

4 个答案: