gpt4 book ai didi

css - 如何使 Logo 出现在绝对定位图像的顶部?

转载 作者:太空宇宙 更新时间:2023-11-04 03:09:02 24 4
gpt4 key购买 nike

我试图让我网站的 Logo 显示在距顶部 50% 和距左侧 8% 的位置。 Here是我到目前为止所做的。请指导我如何实现

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/signin.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<style>
body { background: url(images/bg.jpg); }
input { width: 200px; }
<style type="text/css">
html, body {
overflow: hidden;
}
a:hover{
color:#FFFFFF;
}
</style>
</head>
<body>
<img style="position:absolute;left:0%;top:0%;" src ="images/vector.png"></img>
<img style="position:absolute; margin: 25% 1% 1% 8%" src="images/logo.png"></img>
<div class="container">
<div class="row">
<div class="col-sm-4" style="float:right;color:#000; margin-top: 2%; width: 45%;">
<h3 style="color:#ff9c00"><strong>Login</strong></h3>
<form role="form" style="color:#FFF;">
<span class="form-group">
<!--
<label for="email">Email:</label>
-->
<input style=" width: 46%;
float: left;
margin-right: 4%;" type="email" class="form-control " id="email" placeholder="Enter email" >
</span>
<span class="form-group">
<!--
<label for="pwd">Password:</label>
-->
<input style="width: 50%;
float: left;" type="password" class="form-control" id="pwd" placeholder="Enter password">
</span>
<br><br>
<button type="submit" class="btn btn-default">Login</button>
<p style="float:right;"><a href="#">Forgot your password</a></p>
</form>
<br><br><br><br>
<h3 style="color:#ff9c00"><strong>Register an Account</strong></h3>
<form role="form" style="color:#FFF;">
<div class="form-group">
<label for="usr">Full Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="form-group">
<label for="pwd">Confirm Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<!--
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
-->
<div class="form-group">
<label for="usr">Mobile Number:</label>
<input type="text" class="form-control" id="number">
</div>
<button type="submit" class="btn btn-default">Signup</button>
</form>
</div>



</div>

</div>
</div>

</body>
</html>

最佳答案

大概是这样

百分比(%)

<img src="images/logo.png" style="position: absolute; top: 50%; left: 8%">

像素 (px)

<img src="images/logo.png" style="position:absolute; top: 280px; left: 80px">

注意:如果你从 body 中移除 padding top 和 bottom 可能会更好

关于css - 如何使 Logo 出现在绝对定位图像的顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29895865/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com