我正在尝试将输入文本字段放入图像中。我已经将代码放入flexbox中，但是flexbox可以正常工作并且响应迅速，但是当我尝试将textfield放入图像中时。它不起作用。问题甚至是我试图使相对于其的输入位置仍未显示在图像内并且没有响应。有人可以帮我吗
body {
background-image: url(images/loading_bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
.box {
width:80%;
min-height:80vh;
margin:auto;
border:1px solid;
display: flex;
align-items: center;
justify-content: center; /* not really needed with auto margin on img*/
margin-top: -80px;
}
.box input {
position:relative;
width: 20%;
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
margin-left: 50%;
}
.box img {
position: relative;
display: block;
width: 80%;
min-width:100px;
max-width: 450px; /*actual image width*/
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
}
/* For mobile devices */
@media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/loading_bg.png);
}
} <!-- Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Full Background Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Six Revisions">
<meta name="description" content="How to use the CSS background-size
property to make an image fully span the entire viewport.">
<link rel="icon" href="http://sixrevisions.com/favicon.ico"
type="image/x-icon" />
<link href="http://fonts.googleapis.com/css?
family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<link rel="stylesheet" href="presentational-only/presentational-
only.css">
<link rel="stylesheet" href="responsive-full-background-image.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="presentational-only/presentational-only.js"></script>
</head>
<body>
<header class="container">
<section class="content">
<div class="box">
<input type="text" name="name" placeholder="name">
<img src="http://via.placeholder.com/350x250" width="350"
height="250" alt="missing image">
</div>
<p><a class="button" id="load-more-content" href="#top">Load some
content</a></p>
</section>
</header>
</body>
</html>
答案 0 :(得分：1)
这是您要寻找的东西吗？..我已将图像和输入内容放在1 div .outer中。 使其相对和输入绝对，并进行相应调整。 谢谢
body {
background-image: url(images/loading_bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
.box {
width:80%;
min-height:80vh;
margin:auto;
border:1px solid;
display: flex;
align-items: center;
justify-content: center; /* not really needed with auto margin on img*/
/* margin-top: -80px; */
}
.box input {
position: absolute;
width: 20%;
height: auto;
margin: auto;
/* margin-left: 50%; */
z-index: 1;
top: 50%;
left: 0;
transform: translatey(-50%);
}
.box img {
position: relative;
display: block;
width: 80%;
min-width: 100px;
max-width: 450px;
height: auto;
/* margin: auto; */
}
.outer{
position: relative;
width: 350px;
margin: auto;}
/* For mobile devices */
@media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/loading_bg.png);
}
}<!-- Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Full Background Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Six Revisions">
<meta name="description" content="How to use the CSS background-size
property to make an image fully span the entire viewport.">
<link rel="icon" href="http://sixrevisions.com/favicon.ico"
type="image/x-icon" />
<link href="http://fonts.googleapis.com/css?
family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<link rel="stylesheet" href="presentational-only/presentational-
only.css">
<link rel="stylesheet" href="responsive-full-background-image.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="presentational-only/presentational-only.js"></script>
</head>
<body>
<header class="container">
<section class="content">
<div class="box">
<div class="outer">
<input type="text" name="name" placeholder="name">
<img src="http://via.placeholder.com/350x250" width="350"
height="250" alt="missing image">
</div>
</div>
<p><a class="button" id="load-more-content" href="#top">Load some
content</a></p>
</section>
</header>
</body>
</html>