CSSには部分的にオフスクリーンの+部分が含まれています

Question

CSSのbackground-size: contain;プロパティを使用して背景画像に合わせたいが、部分的に画面外に配置したい。私はtransparrent部にイメージを持っていると私は、「塗りつぶし」を操作できるようにしたいので、私はビューに背景画像を移動するこれを達成するための良い方法だろうと思った：

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

をしかし、それはそうですcontainsパラメータを使用すると、イメージはdivから「オーバースピル」できません。私はoverflow: hiddenを追加しようとしましたが、それは役に立たなかった。どうすればこれを達成できますか？ CSSの方法がないと、JavaScriptの解法は問題ありません。

更新：

https://jsfiddle.net/ghhxddnj/ここではJSFiddleある - それはcontainな大きさである一方で、画面オフの半分、上のスマイリーフェイスの半分を取得しよう。いくつかのコメントで指摘したように、これはやりたいことはやや奇妙なことですが、背景画像はdivの内容と同じサイズでなければなりません（そして、<image>はcontainsパラメータでサイズが決められています）。同じサイズなので、両方が含まれている場合は、同じサイズが出て、x alignを中央に設定して、y alignを使用して、どれくらいのボトルがいっぱいであるかを制御できます。

Answer 1

これを試してみてください：

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) 
} 

出典：How do I get background image size in jQuery?

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