CSS enthalten + Position teilweise außerhalb des Bildschirms

Question

Ich möchte ein Hintergrundbild unter Verwendung der css background-size: contain; Eigenschaften anpassen, aber es teilweise außerhalb des Bildschirms positionieren. Ich habe ein Bild mit einem transparrent Teil und ich möchte in der Lage sein, die „Füllung“ zu manipulieren, so dass ich dachte, ein Hintergrundbild in dem Blick zu bewegen eine gute Möglichkeit wäre, dies zu erreichen:

.bottle { 
    background-image: res://bottle_fill; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: contain; 
    background-position: 50% 30%; 
} 

Aber es scheint, dass mit dem contain-Parameter das Bild nicht vom div "überspülen" kann? Ich habe versucht, overflow: hidden hinzuzufügen, aber es hat nicht geholfen. Wie kann ich das erreichen? Eine JavaScript-Lösung ist in Ordnung, wenn es keinen CSS-Weg gibt.

Update:

https://jsfiddle.net/ghhxddnj/ hier ist ein JSFiddle - versuchen, das Smiley-Gesicht halb auf, halb aus dem Bildschirm zu bekommen, während es contain bemessen ist. Wie von einigen der Kommentare bemerkt, weiß ich, dass dies eine etwas seltsame Sache zu tun ist, aber das Hintergrundbild muss die gleiche Größe wie der Inhalt des div (und <image> mit dem contain-Parameter) die Raw-Dateien sind gleiche Größe, daher, wenn sie beide enthalten, werden sie die gleiche Größe herauskommen und ich kann x align als Mitte setzen und dann y align verwenden, um zu kontrollieren, wie viel von der Flasche voll ist.

Answer 1

Versuchen Sie folgendes:

var image_url = $('#logo').css('background-image'), 
    image; 

// Remove url() or in case of Chrome url("") 
image_url = image_url.match(/^url\("?(.+?)"?\)$/); 

if (image_url[1]) { 
    image_url = image_url[1]; 
    image = new Image(); 

    // just in case it is not already loaded 
    image.src = image_url; 
    var imgoffset = image.height; 
    $('#logo').css('background-position',-imgoffset) 
} 

Quelle: How do I get background image size in jQuery?

EDIT:https://jsfiddle.net/ckf55axs/