Question

我正在尝试将图像放在表单上，如下图所示： 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>

如何实现此效果的任何提示将不胜感激！谷歌带领我在文本中找到了许多与我相似的问题的答案，但没有达到同样的效果。我不只是试图在图像上方放置图像，我希望它位于图像上方的图层上，如图中所示。

Answer 1

你可以尝试一下这对我有用（风格）

> dput(test)
structure(list(weekly = structure(list(sec = c(0, 0, 0, 0, 0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
0, 0, 0, 0, 0, 0, 0, 0), min = c(0L, 0L, 0L, 0L, 0L, 0L, 0L, 
0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L
), hour = c(0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L), mday = c(18L, 25L, 1L, 
8L, 15L, 22L, 29L, 5L, 12L, 19L, 26L, 3L, 10L, 17L, 24L, 31L, 
7L, 14L, 21L, 28L, 5L, 12L, 19L, 26L, 2L, 9L, 16L, 23L, 30L, 
6L, 13L, 20L, 27L, 6L, 13L, 20L, 27L, 3L, 10L, 17L, 24L, 1L, 
8L, 15L, 22L, 29L, 5L, 12L, 19L, 26L, 3L, 10L, 17L, 24L, 31L), 
    mon = c(6L, 6L, 7L, 7L, 7L, 7L, 7L, 8L, 8L, 8L, 8L, 9L, 9L, 
    9L, 9L, 9L, 10L, 10L, 10L, 10L, 11L, 11L, 11L, 11L, 0L, 0L, 
    0L, 0L, 0L, 1L, 1L, 1L, 1L, 2L, 2L, 2L, 2L, 3L, 3L, 3L, 3L, 
    4L, 4L, 4L, 4L, 4L, 5L, 5L, 5L, 5L, 6L, 6L, 6L, 6L, 6L), 
    year = c(116L, 116L, 116L, 116L, 116L, 116L, 116L, 116L, 
    116L, 116L, 116L, 116L, 116L, 116L, 116L, 116L, 116L, 116L, 
    116L, 116L, 116L, 116L, 116L, 116L, 117L, 117L, 117L, 117L, 
    117L, 117L, 117L, 117L, 117L, 117L, 117L, 117L, 117L, 117L, 
    117L, 117L, 117L, 117L, 117L, 117L, 117L, 117L, 117L, 117L, 
    117L, 117L, 117L, 117L, 117L, 117L, 117L), wday = c(1L, 1L, 
    1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
    1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
    1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
    1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L), yday = c(199L, 206L, 213L, 
    220L, 227L, 234L, 241L, 248L, 255L, 262L, 269L, 276L, 283L, 
    290L, 297L, 304L, 311L, 318L, 325L, 332L, 339L, 346L, 353L, 
    360L, 1L, 8L, 15L, 22L, 29L, 36L, 43L, 50L, 57L, 64L, 71L, 
    78L, 85L, 92L, 99L, 106L, 113L, 120L, 127L, 134L, 141L, 148L, 
    155L, 162L, 169L, 176L, 183L, 190L, 197L, 204L, 211L), isdst = c(1L, 
    1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 0L, 
    0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
    0L, 0L, 0L, 0L, 0L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
    1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L), zone = c("CEST", "CEST", 
    "CEST", "CEST", "CEST", "CEST", "CEST", "CEST", "CEST", "CEST", 
    "CEST", "CEST", "CEST", "CEST", "CEST", "CET", "CET", "CET", 
    "CET", "CET", "CET", "CET", "CET", "CET", "CET", "CET", "CET", 
    "CET", "CET", "CET", "CET", "CET", "CET", "CET", "CET", "CET", 
    "CEST", "CEST", "CEST", "CEST", "CEST", "CEST", "CEST", "CEST", 
    "CEST", "CEST", "CEST", "CEST", "CEST", "CEST", "CEST", "CEST", 
    "CEST", "CEST", "CEST"), gmtoff = c(NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, 
    NA_integer_, NA_integer_, NA_integer_)), .Names = c("sec", 
"min", "hour", "mday", "mon", "year", "wday", "yday", "isdst", 
"zone", "gmtoff"), class = c("POSIXlt", "POSIXt")), dist = c(23621.19, 
30400.01, 27458.66, 24511.07, 24908.37, 24413.81, 21096.52, 24557.51, 
14833.71, 15513.72, 13516.23, 8102.02, 5881.44, 8370.01, 7339.34, 
7703.79, 9297.52, 4542, 3555.56, 4438.33, 1968.65, 2259.06, 2729.89, 
2876.66, 1767.86, 784.17, 2004.55, 4446.98, 2203.16, 3956.35, 
4095.28, 3999.88, 3288.59, 4593.19, 6164.63, 6111.46, 8462.84, 
7404.8, 9725.91, 9652.72, 9357.52, 15535.51, 11810.82, 17890.89, 
23518.06, 18754.44, 16377.46, 15023.27, 23354.14, 23328.12, 27024.1, 
23414.38, 28273.08, 24213.3, 19068.03)), .Names = c("weekly", 
"dist"), row.names = c(NA, -55L), class = "data.frame")

身体部位

    body { margin : 0;background: black; }
    #contactform1{text-align:center;margin:40px auto;color:#1a1a1a;background: #f1f1f1;width : 700px;}
    #contactform1 .sendmessagetext{padding-top:50px;text-transform:none;padding-bottom:35px;}
    #contactform1 form{width:75%; margin:0 auto;}
    #name,#phone,#email,#footage,.textarea { margin : 10px auto;height : 30px;width : 450px ; }
    .textarea { resize : none; height : 100px; }
    img { position:absolute;margin: -30% auto auto 60%;z-index:10; }

好吧，你可以添加一些引导以使其更具响应性。

Answer 2

在表单

<div class="ribbon"></div>

添加到表单position: relative
在css中添加#contactform1 form .ribbon样式（见下文）
更改top: 0; right: 0;的{{1}}属性以正确定位元素

.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;
}

我需要在页面上添加一个图像，以便它覆盖表单

2 个答案: