【发布时间】：2018-06-02 10:46:55
【问题描述】：
我正在尝试对齐“福利”段落下方的图像，但由于某种原因，它不允许我将其放置在那里。我使用了背景位置：% %;当我将其更改为比段落低时，我的图像会隐藏，当我给该部分更高的高度时，图像也不会显示。
我只被允许使用 CSS（所以需要使用 CSS 背景属性，而不是这个项目的 HTML。
/*derde section*/
.participation h3 {
font-family: fraktur;
font-weight: 100;
font-size: 10em;
width: 50%;
color: #4A4A4A;
text-align: left;
}
.participation {
/* width: 80%; */
display: grid;
grid-template-columns: 1fr;
margin: 50px auto;
/* border: 2px solid #000000; */
background-image: url('../images/peace.png');
background-repeat: no-repeat;
background-size: contain;
background-position: 13% 82%;
justify-items: end;
}
.participation p {
width: 47%;
margin: 15px 40px;
}
.benefits h3 {
font-family: baskerville;
font-weight: 100;
font-size: 10em;
width: 50%;
color: #000000;
text-align: left;
}
.benefits {
/* width: 80%; */
display: grid;
grid-template-columns: 1fr;
margin: 50px auto;
background-image: url('http://thomasdebelder.be/zengarden%20website//images/kop2.png');
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
justify-items: end;
}
.benefits p {
width: 47%;
margin: 15px 40px;
}
/*einde derde section*/<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a> for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
<p>You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p>Download the sample <a href="/examples/index" title="This page's source HTML code, not to be modified.">HTML</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">CSS</a> to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your <abbr title="Cascading Style Sheets">CSS</abbr> file to a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing <abbr title="Cascading Style Sheets">CSS</abbr> really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>【问题讨论】：