javascript - CSS 包含 + 位置部分在屏幕外

Question

我想要适合背景图像，使用 css background-size: contain;属性，但将其部分放置在屏幕外。我有一个带有透明部分的图像，我希望能够操纵“填充”，所以我认为将背景图像移动到 View 中是实现此目的的好方法:

.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 内容(和 <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)
}

来源:How do I get background image size in jQuery?

编辑: https://jsfiddle.net/ckf55axs/