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

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 填充样式的方式。它没有被告知如何处理“20”，所以您要做的是将它变成 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;
}