顯示一半圖像以覆蓋整個背景圖像

Question

1）要求 ：

我正在嘗試將杯子下面的圖像切成兩等份，然后在杯子的一部分中顯示一半的圖像，在杯子的另一部分中顯示另一圖像的一半

原始圖片 [說圖片1]

杯子的正面和背面 ：[圖片2和圖片3]

2）我的工作

我Image1 on Image 2顯示了Image1 on Image 2並使用了clip: rect代碼借助小提琴1中的代碼在Image 1 on Image 3顯示Image 1 on Image 3 1 ： https : //jsfiddle.net/t0b351gh/4/

下一步是將杯子上的圖像切成相等的部分，並在杯子的兩側顯示。 所以我嘗試了fiddle2 ： https : //jsfiddle.net/x2gjL7wj/6/

3）問題 ：

現在，那些一半的圖像並沒有覆蓋整個杯子的一部分，這意味着這些圖像僅使用了杯子的一半，但是我想將那些一半的圖像覆蓋到整個杯子，如下所示。

Answer 1

您可以使用scale()使圖像（ #simple1和#simple2 ）變大兩倍； 嘗試這個：

#simple1,
#simple2 {
  transform: scale(2);
}

然后，您需要調整其位置。

Answer 2

因此，有些事情限制了它的工作效果：

• 杯子上印制的圖像實際上是大圖像的一部分，因此，除非圖像尺寸完全相同且在不同設計下的位置完全相同，否則不能保證使用“剪輯”將其切割成一致的結果。
• 這同樣適用於打印圖像的兩半，即
• 如上一張圖片所示，不可能使用CSS將打印圖像映射到杯子上，以使其遵循杯子的曲線

話雖如此，使用CSS剪輯和變換比例可以很接近您的理想：

 .parent { float: left; margin: 0; padding: 0; } .whiteimg { position: relative; top: 0; left: 0; margin: 0; padding: 0; } .parent1 .whiteimg { margin-left: -27px; } #simple1, #simple2 { position: absolute; top: 12px; } #simple1 { clip: rect(36px, 96px, 124px, 57px); left: 21px; transform: scale(2.25, 2.3); } #simple2 { clip: rect(36px, 134px, 122px, 95px); left: 26px; transform: scale(2.2, 2.3); } 

 <div class="parent"> <img class="whiteimg" src='https://i.stack.imgur.com/DjZm0.png' height="150" width="150"> <img id="simple1" height="150" width="150" src='https://i.stack.imgur.com/0K9jH.png'> </div> <div class="parent1 "> <img class="whiteimg" src='https://i.stack.imgur.com/KWmCC.png' height="150" width="150"> <div class="parent5"> <img id="simple2" height="150" width="150" src='https://i.stack.imgur.com/0K9jH.png'> </div> </div> <div> <img src="https://i.stack.imgur.com/4AaoH.png" alt="enter image description here" style="width: 250px; margin-left: 15px;"> </div> 

---

更新：

只是重復以上幾點之一：

被裁剪的圖像必須具有固定的尺寸，並且每種情況下的裁剪坐標都必須相同，因為如果裁剪區域和尺寸不同，則裁剪+縮放比例解決方案將無法正常工作。

還有一點：

為了將裁剪的圖像固定在杯子的圖片內，我們縮放裁剪的圖像。 如果圖像左/右部分的縱橫比與杯子側面的縱橫比不匹配，則：

• 我們通過不等比例縮放高度/寬度（即打破長寬比）來使其適合

要么

• 我們會保留長寬比並放大到適合寬度或高度的程度

“對象適合：封面；” 此處不能用於將裁剪后的圖像放置在馬克杯的側面，因為我們正在縮放它。 參見https://codepen.io/raad/pen/awqoVN-我仍在使用相同的技術，但是由於圖像尺寸不同，我不得不調整裁剪，縮放和偏移。

Answer 3

這是解決方案。 使用一些絕對位置和背景大小屬性，我們可以實現這樣的效果。

 .clip { background: url("https://i.stack.imgur.com/CsblL.jpg"); position:absolute; background-repeat: no-repeat; background-size: 400px 230px; padding-left: 140px; padding-top: 50px; border:none; clip: rect(50px,274px,198px,142px); left:-60px; } 

 <div> <img src="https://i.stack.imgur.com/SIZYv.jpg" width="230" height="230" /> <img class="clip" width="150" height="150" /> </div>