Question

我有一个div标签，背景图片在页面加载时有css动画：两个边框将从div标签的中心打开，然后在边框动画结束后一秒钟后出现背景图像。两个边界的位置是绝对的。我有一个问题，当我缩小浏览器时，背景图像缩小（这是我想要的），但两个边框保持在相同的位置。我希望两个边框在浏览器向上或向下缩放时更改位置，以便背景图像div保持在它们之间。无论如何用css或jquery做到这一点？以下是对我所拥有的一切的看法：

.background-img {
  width: 10px;
  margin: 0 auto;
  opacity: 0;
  animation-name: fading-in;
  animation-delay: 2s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.borders {
	position: absolute;
	left: 50%;
	width: 8px;
	background-color: blue;
	height: 50px;
	border-radius: 4px;
}

.left-vertical-border {
	animation-name:move-left;
	animation-duration: 2s;   
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;    

}

.right-vertical-border {
	top: 8px;
	animation-name:move-right;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards; 
}

@keyframes move-left {
	from{transform: translateX(0px);}
	to{transform: translateX(-100px);}
}

@keyframes move-right {
	from{transform: translateX(0px);}
	to{transform: translateX(100px);}
}

@keyframes fading-in {
	from{opacity:0;}
	to{opacity:1;}
}

<!DOCTYPE html>
<html>
	<head>	
		<title>Responsive Absolute Positioning using css/jquery</title>		
	</head>
	<body>
		<div class="left-vertical-border borders"></div>
		<div class="background-img">fake bg image</div>
		<div class="right-vertical-border borders"></div>
	</body>
</html>

Answer 1

使用绝对位置。父div必须具有相对的属性位置。在你的CSS中我没有看到相对位置。在这种情况下，它可能会给出问题

如何使用css / jquery生成响应式绝对定位元素

1 个答案: