CSS - :: after僞元素的定位和尺寸問題

Question

我有2個圖像與透明的背景和需要把一個在彼此的頂部相同的定位：

• 1紡（下）
• 1 fixed（above）

我需要將整個圖像合成爲中心並根據窗口大小調整其大小。

我使用了一個::after僞元素爲固定的，但無法獲得其位置和大小跟隨旋轉的一個。

我想background-size屬性應該參與，但沒有設法正確使用它。

希望得到任何建議，即使涉及的方法與僞類的完全不同。

非常感謝。

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

 
\t \t to { 
 
\t \t  transform:rotate(0deg); 
 
\t \t } 
 
\t \t }

<div class="main-container"> 
 
\t \t <h1>spinning engine</h1> 
 
\t \t <div class="engine-container"> 
 
\t \t \t <div class="engine-complete"> 
 
\t \t \t \t <img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 1

喜歡的東西這個？

編輯：而不是使用::after僞類將圖像設置爲背景，我將固定圖像添加到html中。我也淘汰了你的一個容器。

我居中使用text-align:center動畫圖像並居中使用position: absolute

固定圖像I設置兩個圖像至30％的寬度相對它們的父.engine-container

定影圖像具有較高的z索引比動畫圖像，以便它總是出現在它上面。相對於窗口大小，圖像也相應地改變大小。

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>

UPDATE 繼承人什麼我想出了：使用::after

類似的效果。我可以通過將圖像url插入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>

Answer 2

設置position爲.engine-complete::after到relative

.engine-complete::after {position: relative} 

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

 
\t \t to { 
 
\t \t  transform:rotate(0deg); 
 
\t \t } 
 
\t \t }

<div class="main-container"> 
 
\t \t <h1>spinning engine</h1> 
 
\t \t <div class="engine-container"> 
 
\t \t \t <div class="engine-complete"> 
 
\t \t \t \t <img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>