CSS - ::伪元素定位和维度问题

时间:2017-08-16 23:46:10

标签: css pseudo-class

我有两张透明背景的图片,需要将一张图片放在一起,并且位置相同:

  • 1旋转(下面)
  • 1固定(上)

我需要将整个图像合成集中在一起,并根据窗口大小调整其大小。

我使用::after伪元素作为固定元素,但无法获得其位置和大小以跟随旋转元素。

我认为应该涉及background-size属性,但无法正确使用它。

感谢任何建议,即使它涉及采用与::after伪类完全不同的方法。

非常感谢。

body{
			width: 100%;
			height: 100%;
			background-color: #000;
			text-align: center;
			color: #fff;
		}
		.main-container{
			background-color: #00f;
			width: 50%;
			margin: 0 auto;
		}
		.engine-container{
		}
		.engine-complete{
			position: relative;
			width: 100%;
			height: auto;
			margin: 0 auto;	
		}
		.engine-complete::after{
			content: ""; 
			position: absolute;
			width: 191px;
			height: 192px;
			top: 1px;
			left: 0;
			background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png); 
		}
		.engine-rotating{
			width: 50%;
			height: auto;			
		}
		.spin {
		  animation-duration: 15s;
		  animation-name: spin;
		  animation-iteration-count: infinite;
		  animation-timing-function:linear;
		  animation-play-state: running;
		}
		@keyframes spin {
		  from {
		    transform:rotate(360deg);
		  }

		  to {
		     transform:rotate(0deg);
		  }
		}
<div class="main-container">
		<h1>spinning engine</h1>
		<div class="engine-container">
			<div class="engine-complete">
				<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>  
			</div>
		</div>
	</div>

2 个答案:

答案 0 :(得分:1)

这样的东西?

编辑:我没有使用::after伪类将图像设置为背景,而是将固定图像添加到html中。我也取消了你的一个容器。

我使用text-align:center将动画图像居中,并使用position: absolute将固定图像居中

我将两张图片相对于父.engine-container

设置为30%宽度

固定图像的z-index高于动画图像,因此它始终显示在动画图像上。相对于窗口大小,图像也相应地改变大小。

body {
  width: 100%;
  height: 100%;
  background-color: #000;
  text-align: center;
  color: #fff;
}

.main-container {
  background-color: #00f;
  width: 50%;
  margin: 0 auto;
}

.engine-container {
  text-align: center;
  position: relative;
}

.engine-rotating,
.engine-fixed {
  width: 30%;
}

.engine-fixed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 5000;
}

.spin {
  animation-duration: 15s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
}

@keyframes spin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
<div class="main-container">
  <h1>spinning engine</h1>
  <div class="engine-container">
    <img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
    <img src="https://image.ibb.co/jOqNma/engine1_crpd.png" class="engine-fixed" alt="">
  </div>
</div>

<强>更新 下面是我想出的:

使用::after的类似效果。我可以通过将图片网址插入content:规则而不是设置背景图片来实现此目的。

body {
  width: 100%;
  height: 100%;
  background-color: #000;
  text-align: center;
  color: #fff;
}

.main-container {
  background-color: #00f;
  width: 50%;
  margin: 0 auto;
}

.engine-container{
  text-align: center;
  position: relative;

}

.engine-rotating{
}

.engine-container::after{
  content: url('https://image.ibb.co/jOqNma/engine1_crpd.png');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 5000;
}

.spin{
  animation-duration: 15s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
}

@keyframes spin{
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
<div class="main-container">
  <h1>spinning engine</h1>
  <div class="engine-container">
    <img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
  </div>
</div>

答案 1 :(得分:0)

position的{​​{1}}设为.engine-complete::after

relative

&#13;
&#13;
.engine-complete::after {position: relative}
&#13;
body{
			width: 100%;
			height: 100%;
			background-color: #000;
			text-align: center;
			color: #fff;
		}
		.main-container{
			background-color: #00f;
			width: 50%;
			margin: 0 auto;
		}
		.engine-container{
		}
		.engine-complete{
			position: relative;
			width: 100%;
			height: auto;
			margin: 0 auto;	
		}
		.engine-complete::after{
			content: ""; 
			position: relative; /* this was changed */
			width: 191px;
			height: 192px;
			top: 1px;
			left: 0;
			background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png); 
		}
		.engine-rotating{
			width: 50%;
			height: auto;			
		}
		.spin {
		  animation-duration: 15s;
		  animation-name: spin;
		  animation-iteration-count: infinite;
		  animation-timing-function:linear;
		  animation-play-state: running;
		}
		@keyframes spin {
		  from {
		    transform:rotate(360deg);
		  }

		  to {
		     transform:rotate(0deg);
		  }
		}
&#13;
&#13;
&#13;