Question

我对CSS和图像按钮有一点疑问。我搜索并尝试了很多选项，但没有一个适合我。

我需要在CSS样式中链接我的图像按钮。当您按下图像时，会打开一个新网页，您可以在其中拍摄自己的照片。但无论我改变什么，我的形象都会保持在同一位置。

如果我使用How to link an image and target a new window上写的代码，那么我的图片会保留在底部。

body {
  margin: 0;
  padding: 0;
  background: url(basf.jpg);
  background-size: cover;
  font-family: sans-serif;
}

.loginBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 80px 40px;
  width: 350px;
  height: 500px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .5);
}

.user {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: calc(-150px/2);
  left: calc(50% - 65px);
}

button.imgbtn1 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: calc(-20px/2);
  left: calc(50% - -30px);
  cursor: pointer;
}

h2 {
  margin: 0;
  padding: 0 0 20px;
  color: deepskyblue;
  text-align: center;
}

.loginBox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
  color: #fff;
}

.loginBox input {
  width: 100%;
  margin-bottom: 20px;
}

.loginBox input[type="text"] {
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
}

::placeholder {
  color: rgba(255, 255, 255, .5);
}

.loginBox input[type="submit"] {
  border: none;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
  background: deepskyblue;
  cursor: pointer;
  border-radius: 20px;
}

.loginBox input[type="submit"]:hover {
  background: #deepskyblue;
  color: #262626;
}

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Registration Form</title>
  <link rel="stylesheet" type="text/css" href="style3.css">
</head>

<body>
  <div class="loginBox">
    <img src="user.png" class="user">
    <h2>Meld u aan</h2>
    <form>
      <p>Naam</p>
      <input type="text" name="" placeholder="Naam">
      <p>Voornaam</p>
      <input type="text" name="" placeholder="Voornaam">
      <p>Bedrijf</p>
      <input type="text" name="" placeholder="Bedrijf">
      <p>Doel
        <p>
          <input type="text" name="" placeholder="Doel">

          <input type="submit" id="btnClick" value="zend" />

          <a href="http://localhost/Form/foto.html"> <img src="foto.png" /></a>




    </form>

  </div>


</body>

</html>

Layout

Answer 1

玩了一会儿后，我发现了一些有用的东西。

HTML：

 <center><div id = "imgPositioning">
<a href="http://localhost/Form/foto.html"> <img id = "imgOne" class = "user" src="user.png" /></a>
<img src="foto.png" id = "imgTwo" class="user"/>
</div></center>

的CSS：

#imgPositioning{
display:inline;

}
#imgTwo{
height:100px;
width:200px;
}
#imgOne{
height:50px;
width:100px;
float:center;
}

Answer 2

答案。（在朋友的帮助下找到它）。现在我需要做一些重新设计。谢谢你的回答！ ;）

body {
  margin: 0;
  padding: 0;
  background: url(basf.jpg);
  background-size: cover;
  font-family: sans-serif;
}
.user-picture {
  position: absolute;
  top: -25px;
  width: 100%;
}

.user-picture-box {
  max-width: 150px;
  height: 150px;
  margin: 0 auto;
  position: center;
}

.user-picture-image {
	
	width: 130px;
	height: 130px;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	top: calc(-150px/2);
	left: calc(50% - 70px);
	
}

.user-create-picture {
	
	width: 70px;
	height: 70px;
	border-radius: 50%;
	
	position: absolute;
	top: calc(-20px/2);
	left: calc(50% - -30px);
	cursor: pointer;
}

.user-create-picture ('img') {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	
	position: absolute;
	top: calc(-20px/2);
	left: calc(50% - -30px);
	cursor: pointer;	
}
.login-box {
  display: block;
  position: relative;
  background-color: rgba(0, 0, 0, .5);
  margin: 100px auto 0px auto;
  max-width: 350px;
}

.login-form {
  padding: 80px 20px 20px 20px;
}

.login-box h2 {
  color: deepskyblue;
  text-align: center;
 
}

.login-box label {
  margin: 0;
  padding: 0;
  font-weight: bold;
  color: #fff;
}

.login-box input {
  width: 100%;
}

.login-box input[type="text"] {
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
  margin-bottom: 20px;
}

::placeholder {
  color: rgba(255, 255, 255, .5);
}

.login-box input[type="submit"] {
  border: none;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
  background: deepskyblue;
  cursor: pointer;
  border-radius: 20px;
}

.login-box input[type="submit"]:hover {
  background: deepskyblue;
  color: #262626;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Registration Form</title>
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>
  <div class="login-box">
    <div class="user-picture">
      <div class="user-picture-box">
          <img src="user.png" class="user-picture-image">
          <a href="http://localhost/Form/foto.html" class="user-create-picture">
            <img src="foto.png" height="70px" width="70px">
          </a>
      </div> 
    </div>
    <div class="login-form">
      <h2>Meld u aan</h2>
      <form>
        <label for="naam">Naam</label>
        <input type="text" id="naam" name="naam" placeholder="Naam">
        <label for="voornaam">Voornaam</label>
        <input type="text" id="voornaam" name="voornaam" placeholder="Voornaam">
        <label for="bedrijf">Bedrijf</label>
        <input type="text" id="bedrijf" name="bedrijf" placeholder="Bedrijf">
        <label for="doel">Doel</label>
        <input type="text" id="doel" name="doel" placeholder="Doel">
        <input type="submit" id="btnClick" value="zend" />
      </form>
    </div>  
  </div>
</body>
</html>

end result picture

图片按钮样式

2 个答案: