用css填充圖像

我正在嘗試創建一個可以用css/js填充和排空的咖啡壺。我的想法是創建一個咖啡壺圖像，並用css填充中間部分，根據我想要咖啡壺填滿多少來製作動畫。我不知道如何讓CSS填充留在鍋內。我如何填充鍋內部，但也要確保「填充」保持在不同屏幕尺寸的鍋內圖像內？用css填充圖像

這裏是HTML/CSS，我到目前爲止有：

<div id="main"> 
    <div class="image1 five columns offset-by-two"> 
     <div class="circle"></div> 
     <img src="http://i.imgur.com/DbBqGTp.png"> 
    </div> 
    </div> 

#main{ 
    position: absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    overflow:hidden; 
} 

#main img{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.circle 
{ 
    position: absolute; 
    top: 57%; 
    left: 47%; 
    transform: translate(-50%, -50%); 
    width: 470px; 
    height: 470px; 
    border-radius:250px; 
    font-size:50px; 
    color:#fff; 
    line-height:500px; 
    text-align:center; 
    background:#000 
}

的jsfiddle：https://jsfiddle.net/vjpprtfu/

來源

2016-05-07 WaterlessStraw

很酷的想法！用裏面的咖啡液製作面膜。小提琴：https://jsfiddle.net/fuk291kf/

的標記循環是這樣的：

<div id="main"> 
     <div class="circle-mask"> 
     <div class="liquid"></div> 
     </div> 
     <img src="http://i.imgur.com/DbBqGTp.png"> 
    </div>

和CSS：

.circle-mask { 
    position: absolute; 
    width: 77%; 
    height: 77%; 
    top:45px; 
    border-radius:50%; 
    text-align:center; 
    border: 1px solid red; 
    overflow: hidden; 
    display:block; 
} 

.liquid { 
    position: absolute; 
    top: 50px; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    font-size:50px; 
    color:#fff; 
    text-align:center; 
    background:#000; 
}

以改變液體的水平，提高或降低的.liquid

頂值

現在，您必須添加另一個絕對定位的div，以便剪切從底部出來的咖啡。

來源

2016-05-07 22:38:38

絕對非常感謝您將這些回覆放入回覆的時間，但是這使得真的很難（至少對我而言）找到一種方法來保持回中位置居中，並在頁面變小時將其縮小移動記憶）。這裏是一個縮放和對齊的小提琴：https://jsfiddle.net/fuk291kf/3/ 我正在研究一個使用計算機視覺來檢測真正的咖啡壺和它是如何充滿它的AI項目。我正在嘗試製作一個網頁來補充這一點，以便能夠以「美麗」的方式展示計算機視覺所看到的內容。我將如何模仿液麪，但保持縮放？ – WaterlessStraw

您是否嘗試過使用'

用css填充圖像

回答

相關問題