背景大小如何與元素相關？

對不起，如果我的問題的標題似乎不清楚。我正在嘗試創建一個工具，允許用戶點擊圖片中的任意位置，並將該圖片的片段剪下以備後用，類似於您在eBay或亞馬遜上找到的內容，只需通過懸停放大圖片即可超過它。背景大小如何與元素相關？

我的做法（並請讓我知道，如果有更好的一個）是片斷的背景圖像設置爲被觀察的圖像。必須設置背景大小，以便片段背景中的圖像大小爲頁面上顯示的圖像大小。從那裏，我將圖像容器和代碼片段容器之間的偏移差異化，並使用X和Y組件設置負背景位置。

我面對的問題是，當我設置的背景大小的圖像的大小相同，該代碼段內的背景圖像的尺寸遠遠大於被觀察的圖像的尺寸小。有任何想法嗎？

這是我到目前爲止有：

console.log($("#snippet").offset().top - $("#image").offset().top); 
 

 

 
$(window).click(function(event) { 
 
    $("#snippet").css("top", event.pageY); 
 
    $("#snippet").css("left", event.pageX); 
 
});

#image { 
 
    height: 19em; 
 
    width: auto; 
 

 
    border: 2px solid orange; 
 
} 
 

 
#snippet { 
 
    background: url(https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: -200px -10px; 
 
    background-size: 19em auto; 
 

 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="css/sneakapeek.css" /> 
 
     <script src="js/jquery.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
     <img id="image" src="https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg"> 
 
     <div id="snippet"></div> 
 

 
     <script src="js/sneakapeek.js"></script> 
 
    </body> 
 
</html>

來源

2017-08-02 Zulfe

搖搖頭......

的參數background-size是width然後height，不height然後width 。

https://css-tricks.com/almanac/properties/b/background-size/#article-header-id-2

來源

2017-08-02 13:43:56 Zulfe

要定位的正確的剪斷裏面的背景圖片，你需要設置相應的「背景位置」。

$(window).click(function(event) { 
 
       $("#snippet").css("top", event.pageY); 
 
       $("#snippet").css("left", event.pageX); 
 
       var offset = $('#image').offset() 
 
       $("#snippet").css("background-position", (-event.pageX + offset.left) + 'px ' + (-event.pageY + offset.top) + 'px') 
 
      });

#image { 
 
    height: 19em; 
 
    width: auto; 
 

 
    border: 2px solid orange; 
 
} 
 

 
#snippet { 
 
    background: url(https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: -200px -10px; 
 
    background-size: auto 19em; 
 

 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="css/sneakapeek.css" /> 
 
     <script src="js/jquery.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
     <img id="image" src="https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg"> 
 
     <div id="snippet"></div> 
 

 
     <script src="js/sneakapeek.js"></script> 
 
    </body> 
 
</html>

來源

2017-08-02 13:52:53

單獨保留背景大小，因此它默認的圖像的大小。取而代之，通過使用e.offsetY/X除以圖像高度/寬度並乘以100，獲得單擊的頂部/左側位置的百分比，然後將該值用作片段的background-position。

var $snippet = $("#snippet"), 
 
    $img = $("#image"); 
 
    
 
$(window).on('load',function() { 
 
    var imgW = $img.width(), 
 
     imgH = $img.height(); 
 
     
 
    $img.on("click", function(event) { 
 
     var topP = event.offsetY/imgH * 100, 
 
     leftP = event.offsetX/imgW * 100; 
 

 
     $snippet.css({ 
 
     "background-position-y": topP + "%", 
 
     "background-position-x": leftP + "%", 
 
     top: event.pageY, 
 
     left: event.pageX 
 
     }); 
 
    }); 
 
});

* {box-sizing:border-box;} 
 
#image { 
 
    height: 19em; 
 
    width: auto; 
 
    border: 2px solid orange; 
 
} 
 

 
#snippet { 
 
    background-image: url(https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg); 
 
    background-repeat: no-repeat; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="css/sneakapeek.css" /> 
 
    <script src="js/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <img id="image" src="https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg"> 
 
    <div id="snippet"></div> 
 

 
    <script src="js/sneakapeek.js"></script> 
 
</body> 
 

 
</html>

來源

2017-08-02 13:59:06

我使用一個比在實施例不同的圖像。如果它不縮放，它非常小，但它是一個SVG。我會如何處理這個問題？ – Zulfe

@Zulfe不確定，我需要看到它。那是我第一次做這樣的事情。你爲什麼不在你的OP中使用這個img？ –

@Zulfe我對圖像的中心效果很好，但似乎失去了邊緣的百分比...仍然看着那.... –

背景大小如何與元素相關？

回答

相關問題