CSS包含+部分不在屏幕上的位置

Question

我想使用css background-size: contain;適合背景圖像background-size: contain; 屬性，但將其部分置於屏幕外。 我有一個具有透明部分的圖像，並且希望能夠操縱“填充”，所以我認為將背景圖像移到視圖中將是實現此目的的一種好方法：

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

但是似乎使用contain參數，圖像不能從div“溢出”？ 我嘗試添加overflow: hidden但沒有幫助。 我該如何實現？ 如果沒有CSS方式，則JavaScript解決方案很好。

更新：

https://jsfiddle.net/ghhxddnj/這里是一個的jsfiddle -試圖讓笑臉一半，一半關閉屏幕，而它的大小contain 。 正如一些評論所指出的，我知道這是一件很奇怪的事情，但是背景圖像的大小必須與div文件的div內容的大小相同（且<image>大小包含contain參數）尺寸相同，因此如果它們都使用容器，它們的尺寸將相同，我可以將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)
}

資料來源： 如何在jQuery中獲得背景圖片大小？

編輯： https ： //jsfiddle.net/ckf55axs/