背景图像剪辑到可拖动的 div

Posted 2023-05-08

【中文标题】背景图像剪辑到可拖动的 div

【英文标题】：Background image clipped to draggable div

【发布时间】：2017-08-25 03:01:56

【问题描述】：

我正在尝试制作一个带有完整背景图像的 div 和顶部带有容器的 div，并且此 div 是可拖动的，并且在拖动时它显示与背景相同的图像但已更改。

嗯，这是pen 中的一些内容

到目前为止我的 CSS：

.contain
    position:relative;


#dummy 
    background:url(http://i.imgur.com/CxYGDBq.jpg);
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    position:absolute;
    top:0;
    left:0;


#dummy2
    position:absolute;
    top:0;
    z-index:99;
    left:0;


.mao
    background: url(http://i.imgur.com/UbNyhzS.png);
    width:250px;
    height:300px;
    position:absolute;
    bottom:0;
    z-index:999;
    background-size:contain;


.screen
    width:960px;
    height:995px;
    background-color:pink;
    position:relative;
    left:32px;
    top:30px;
    background-attachment:fixed;
    background: url(http://i.imgur.com/yjR8SCL.jpg);

【问题讨论】：

问题中的链接已失效...您碰巧还有代码吗？最好在问题中添加一个可运行的 sn-p。

【参考方案1】：

如果我正确理解您的要求，您可以通过查找可拖动对象移动时的当前位置，然后使用这些值设置screen 的背景的background-position，进行排序X 射线眼镜效应。

var imageOffset = 
    top: 30,
    left: 32
;

$(function() 
    var screenHeight = $('body').height() - 300; // 300: moa height

    $(".screen").css('background-position', -(imageOffset.left) + 'px ' + -(screenHeight + imageOffset.top) + 'px');

    $(".mao").draggable(
        axis: "x",
        drag: function(event, ui) 
            $(".screen").css('background-position', -(ui.position.left + imageOffset.left) + 'px ' + -(ui.position.top + imageOffset.top) + 'px');
        
    );
)

示例代码笔：http://codepen.io/anon/pen/JWxwzK?editors=0000

您还可以使用同一段代码将手限制在屏幕的左/右边界。官方文档中有一个代码示例：http://api.jqueryui.com/draggable/#event-drag

【讨论】：

如果这不是你想要的，请随时让我知道缺少什么，我会更新我的答案

【参考方案2】：

对于我假设您想要做的事情，我已经编辑了您的笔以反映正确的更改。你可以看到它here。

嵌套不当 改变的第一件事是将您希望可拖动的 div <div class="mao"></div> 切换为 <div class="screen"></div> 元素的子元素。

CSS 图片网址 另一件需要注意的事情 - 在 CSS 中指定 URL 时，您需要将其包含在引号中。这些 " $url_here "。