html - 相对于背景定位图像
问题描述
我希望图像的定位使其中心始终位于蓝色背景的底部。它应该如下所示:
我可以使用 top:37v; 但是调整窗口高度不会让它保持相对于背景的位置。
.background{
background-image: url("https://i.imgur.com/5Y5F5fF.png");
background-repeat: no-repeat;
background-size: cover;
background-position: 0 100%;
height: 50vh;
}
header img{
position: relative;
height: 100px;
/*!*top: 37vh;*! Don't want to use this as resizing will effect its position relative to background*/
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<header>
<div class="container-fluid d-flex justify-content-center background">
<img src="https://i.imgur.com/3dzn4KM.png" alt="phone">
</div>
</header>
解决方案
将这 2 行添加到样式中:
header img{
position: relative;
height: 100px;
top:50%;
margin-top:-50px;
}
这应该会有所帮助。
推荐阅读
- typescript - 如何实现其类型派生自类构造函数参数的项
- asp.net - CCAVENUE 与 asp.net
- python - BeautifulSoup "AttributeError: 'NoneType' 对象没有属性 'text'"
- c# - 每次按下按钮时是否可以调用特定方法,即使控制台不期望用户输入?
- python - 有没有办法在单行 if 语句中增加一个计数器?
- spring-security - IllegalStateException:无法将 org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder 类型的值转换为所需类型
- ionic4 - 如何使用简单的提交按钮在ionic4中提交用户名和密码
- debian - Debian cifs 客户端突然崩溃
- java - 循环丢失匹配记录时如何显示错误
- python - 如何在 Django 中重用函数或类