gpt4 book ai didi

html - 如何使用 CSS 使图像始终相对于 div

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

我的登录表单有问题,当浏览器窗口出现较小的图像时,出现在登录表单头部的图像会停止正确显示。 正确观点: http://im87.gulfup.com/bYOI29.png

当我更改浏览器窗口大小时: http://im59.gulfup.com/95cyji.jpg

html代码:

<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="login panel">
<meta name="author" content="WhiteOne">

<title>Login</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- icon location -->
<link rel="stylesheet" type="text/css" href="styles/icon.css" />
<!-- Set Full Background -->
<link rel="stylesheet" type="text/css" href="styles/background.css" />
<link rel="stylesheet" type="text/css" href="styles/icon-login.css" />

</head>
<body>

<div style="margin: 100px auto 0 auto;">
<div class="container">
<div class="row">
<!-- login box start -->
<div class="col-md-4 col-md-offset-4" id="loginbox">

<div class="login-panel panel panel-default">

<div class="panel-heading">
<img src="icons/Instagram.png" id="instagram-login">
<img src="icons/Twitter-icon.png" id="twitter-login">
<img src="icons/Facebook-icon.png" id="Fb-login">

<h3 class="panel-title" >Please Sign In</h3>

</div>

<div class="panel-body">
<form role="form" method="post" action="">
<fieldset>
<div class="form-group">
<span class=usericon>
<i class="fa fa-user"></i>
</span>
<input class="form-control" id="username" placeholder="Username" name="username" type="text" autofocus required>

</div>

<div class="form-group">
<span class="passwordicon">
<i class="fa fa-lock"></i>
</span>
<input class="form-control" id="password" placeholder="Password" name="password" type="password" value="" required>
</div>

<input type="submit" name="Login" value="login" class="btn btn-lg btn-success btn-block" id="login">

</fieldset>
</form>

</div>
</div>

</div><!-- End of login box -->
</div><!-- end of row class -->
</div><!-- end of container -->

</body>

</html>

社交图标位置的 css 代码:icon-login.css

    #instagram-login {
left: 250px;
opacity: 0.95;
position: absolute;
top: -16px;
}
#instagram-login:hover {
opacity: 1;
}
#twitter-login {
left: 195px;
opacity: 0.925;
position: absolute;
top: -12px;
}
#twitter-login:hover {
opacity: 1;
}
#Fb-login {
left: 140px;
opacity: 0.92;
position: absolute;
top: -12px;
}
#Fb-login:hover {
opacity: 1;
}

.panel-heading {

position: relative;

}

我试过相对于面板标题而不是固定的,但它也不起作用。

最佳答案

您应该做的第一件事是将图像扭曲成一个链接,然后将所有链接包装在一个带有 social 类的 div 中

<div class="social">
<a href="#"><img src="Instagram.png"></a>
<a href="#"><img src="Twitter-icon.png"></a>
<a href="#"><img src="Facebook-icon.png"></a>
</div>

要绝对定位图标,您应该为父 div (#loginbox) 提供以下内容:

#loginbox {
position: relative;
}

然后,您可以将这些样式应用于社交 div

.social img {
width: 50px;
}

.social a {
display: inline-block;
float: right;
}

.social {
position: absolute;
right: 13px;
top: 0;
}

关于html - 如何使用 CSS 使图像始终相对于 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26657330/

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