html - 我需要在页面上添加图片，以便覆盖表格的一部分

我正在尝试将图像放置在表单上，​​如该图像所示：
example of the effect i'm trying to achieve.

我要使用的图像是这样的：Ribbon photo

这是表格的代码：

#contactform1{text-align:center;margin-bottom:40px;color:#1a1a1a;}
#contactform1 .sendmessagetext{padding-top:50px;text-transform:none;padding-bottom:35px;}
#contactform1 form{width:75%; margin:0 auto;}

<section id="contactform1" class="cform">
			<div class="wrap">
				<h2 class="sendmessagetext">Get in Touch</h2>
<form name="simp_cont" method="post" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" class="contact" onSubmit="return validateForm(this)">
	<input class="input" name="captcha" style="position:absolute; left:-9999px;" id="captcha" type="text" />
	<input type="text" name="fname" id="name" placeholder="NAME">
	<input type="text" name="phone" id="phone" placeholder="PHONE NUMBER">
	<input type="text" name="email" id="email" placeholder="EMAIL ADDRESS">
	<input type="text" name="footage" id="footage" placeholder="ESTIMATED SQUARE FOOTAGE">
	<textarea class="textarea" name="message" placeholder="COMMENTS"></textarea>
	<input name="form_name" type="hidden" value="contact_form" />
	<button type="submit" id="sliderbutton2" name='submit'>SEND MESSAGE</button>
</form>
<br><br>
			<div class="clear"></div>
	</div>
</section>

任何有关如何达到这种效果的提示将不胜感激！ Google为我提供了许多类似的答案，可以在文本中挖掘出来，但没有达到相同的效果。我不仅试图将图像放置在表单上方，还希望它位于其上方的图层上，就像图像中显示的一样。

最佳答案

在表单内添加新元素<div class="ribbon"></div>
添加到表单position: relative
在CSS中添加#contactform1 form .ribbon样式（请参见下文）
更改top: 0; right: 0;的.ribbon属性以正确定位元素

#contactform1{text-align:center;margin-bottom:40px;color:#1a1a1a;}
#contactform1 .sendmessagetext{padding-top:50px;text-transform:none;padding-bottom:35px;}
#contactform1 form {width:75%; margin:0 auto; position: relative;}
#contactform1 form .ribbon {
  background: url(https://i.stack.imgur.com/dGkgC.png) 0 0 no-repeat transparent;
  width: 213px;
  height: 303px;
  position: absolute;
  right: 0;
  top: 0;
}

<section id="contactform1" class="cform">
  <div class="wrap">
    <h2 class="sendmessagetext">
      Get in Touch
    </h2>
    <form name="simp_cont" method="post" action=" <?=$_SERVER['REQUEST_URI'];?> #cform1" class="contact" onSubmit="return validateForm(this)">
      <div class="ribbon"></div>
      <input class="input" name="captcha" style="position:absolute; left:-9999px;" id="captcha" type="text"/>
      <input type="text" name="fname" id="name" placeholder="NAME"/>
      <input type="text" name="phone" id="phone" placeholder="PHONE NUMBER"/>
      <input type="text" name="email" id="email" placeholder="EMAIL ADDRESS"/>
      <input type="text" name="footage" id="footage" placeholder="ESTIMATED SQUARE FOOTAGE"/>
      <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea>
      <input name="form_name" type="hidden" value="contact_form"/>
      <button type="submit" id="sliderbutton2" name='submit'>
        SEND MESSAGE
      </button>
    </form>
    <br/>
    <br/>
    <div class="clear"></div>
  </div>
</section>