- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
使用 div 或 Canvas ,目标是用图像/屏幕截图完全填充设备框架,但不会溢出框架。
屏幕截图 1 展示了一张紧贴在框架内的图像。屏幕截图 2 显示了超出帧的图像。
第一个挑战是图像/屏幕截图的纵横比可能会有所不同,即可能会使用不同大小的图像。例如,一个图像可能是 1242x2688,而另一个图像可能是 1440x2960。无论纵横比如何,屏幕截图都应填满整个框架,但不会溢出其边缘。
第二个挑战是它们通常在 CSS 中使用 transform: scale(x)
进行缩放。到 ~25%,并且浏览器的舍入行为会在此比例下产生像素大小的差距。然而,当比例恢复到 100% 时,这些差距就会消失。
我们尝试了两种选择。两者都有缺陷。
两者都使图像/屏幕截图成为框架 div 的子 div。
选项 1:填充值
我们使用“填充”值来调整子 div(即屏幕截图)的宽度、高度和位置,使其适合其父级框架。但是,具有不同纵横比的图像可能会溢出框架或不填满框架。
选项 2:剪切路径
我们使用剪切路径来表示框架内的区域,但有时间隙是可见的,具体取决于 CSS 比例值。我们不能允许差距。
差距问题在下面的代码和 Codepen 中进行了说明。
还有其他选择吗?
Codepen(说明差距):https://codepen.io/anon/pen/yWXvJE
.colorClassProxy {
display: none
}
.itemBox, .itemBox > * {
position: absolute;
box-sizing: border-box;
}
.backgroundColorBox, .backgroundGraphicBox, .foregroundBox, .frameBox {
width: 100%;
height: 100%;
background-size: contain;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;"><div class="backgroundColorBox" style="width: 163px; height: 335px; top: 17px; left: 4px; -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E"); background-size: cover;"></div><div class="backgroundGraphicBox" style="width: 163px; height: 335px; top: 17px; left: 4px; -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E"); background-size: cover;"></div><div class="foregroundBox" style="width: 163px;height: 335px;top: 17px;left: 4px;-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E");background-size: cover;background-image: url(https://uce9d8d4a8a6c69a057e9a584674.dl.dropboxusercontent.com/cd/0/inline/AhH2Z_q_te_Yu3IKd2cdiB0XMhJEzRdO4KP686rb3VdE1hxeIamOskpIoAhrxKegUAxERpAIyX3g0VABD7EU5S4JWe9X_Q1zdaS2hsoD_SpI4w/file#);"></div><div class="frameBox" data-natural-width="1528.64" data-natural-height="3224.29" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTI4LjY0IiBoZWlnaHQ9IjMyMjQuMjkiIHZpZXdCb3g9IjAgMCAxNTI4LjY0IDMyMjQuMjkiIGRhdGEtaHAtY29sb3ItcHJlcGFyZWQ9InRydWUiIHN0eWxlPSItLWhwLWNvbG9yLTluYXo1Z0JWLTE6cmdiKDI1NSwgMjU1LCAyNTUpOyAtLWhwLWNvbG9yLTluYXo1Z0JWLTI6dXJsKFwjY29sb3ItOW5hejVnQlYtMik7Ij48cmFkaWFsR3JhZGllbnQgaWQ9ImNvbG9yLTluYXo1Z0JWLTIiIGRhdGEtY3NzPSJyYWRpYWwtZ3JhZGllbnQocmdiKDY3LCA2NywgNjcpLCByZ2IoMCwgMCwgMCkpIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI3MC43MSUiPjxzdG9wIHN0b3AtY29sb3I9InJnYig2Nyw2Nyw2NykiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMCwwLDApIiBvZmZzZXQ9IjEwMCUiLz48L3JhZGlhbEdyYWRpZW50Pjx0aXRsZT5Bc3NldCAyPC90aXRsZT48cGF0aCBkPSJNODU3Ljc4LDcyLjY4SDY3MC44NmMtNy42NCwwLTEzLjg1LDUuOTEtMTMuODUsMTMuMjFzNi4yMSwxMy4yMSwxMy44NSwxMy4yMUg4NTcuNzhjNy42NiwwLDEzLjg1LTUuOTEsMTMuODUtMTMuMjFTODY1LjQ0LDcyLjY4LDg1Ny43OCw3Mi42OFoiIGZpbGw9IiNlOGVlZWYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9ImZpbGw6IHZhcigtLWhwLWNvbG9yLTluYXo1Z0JWLTEpOyIvPjxwYXRoIGQ9Ik0xNTE0Ljc5LDc4Ni4yNlYxNjUuMTdDMTUxNC43OSw3My45NSwxNDM3LjI5LDAsMTM0MS43MiwwSDE4Ni45MkM5MS4zMywwLDEzLjg1LDczLjk1LDEzLjg1LDE2NS4xN1Y0NzUuNzFDNi4xOSw0NzUuNzEsMCw0ODEuNjIsMCw0ODguOTJWODU4LjkzYzAsNy4zLDYuMTksMTMuMjEsMTMuODUsMTMuMjF2MTMyLjE1QzYuMTksMTAwNC4yOSwwLDEwMTAuMiwwLDEwMTcuNXYxOTguMjFjMCw3LjMxLDYuMTksMTMuMjIsMTMuODUsMTMuMjJWMzA1OS4xYzAsOTEuMjMsNzcuNDgsMTY1LjE5LDE3My4wNywxNjUuMTloMTE1NC44Yzk1LjU3LDAsMTczLjA3LTczLjk2LDE3My4wNy0xNjUuMTlWMTAxNy41YzcuNjQsMCwxMy44NS01LjkxLDEzLjg1LTEzLjIxVjc5OS40N0MxNTI4LjY0LDc5Mi4xNywxNTIyLjQzLDc4Ni4yNiwxNTE0Ljc5LDc4Ni4yNlpNNjcwLjg2LDcyLjY4SDg1Ny43OGM3LjY2LDAsMTMuODUsNS45MSwxMy44NSwxMy4yMVM4NjUuNDQsOTkuMSw4NTcuNzgsOTkuMUg2NzAuODZjLTcuNjQsMC0xMy44NS01LjkxLTEzLjg1LTEzLjIxUzY2My4yMiw3Mi42OCw2NzAuODYsNzIuNjhabTY4OC40OCwzMDMyLjY3SDE2OS4zMmMtNjguODQsMC0xMjQuNjEtNTMuMjQtMTI0LjYxLTExOC45M1YyNjQuMjljMC02NS42OSw1NS43Ny0xMTguOTQsMTI0LjYxLTExOC45NEgxMzU5LjM0YzY4LjgxLDAsMTI0LjYxLDUzLjI1LDEyNC42MSwxMTguOTRsLjAxLDI3MjIuMTNDMTQ4My45NiwzMDUyLjExLDE0MjguMTYsMzEwNS4zNSwxMzU5LjM0LDMxMDUuMzVaIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0eWxlPSJmaWxsOiB2YXIoLS1ocC1jb2xvci05bmF6NWdCVi0yKTsiLz48L3N2Zz4=);" data-inner-natural-left="41.7" data-inner-natural-top="142.4" data-inner-natural-width="1445.2" data-inner-natural-height="2965.9"><iframe class="colorClassProxy"></iframe></div></div>
最佳答案
其他答案
在我提供我自己的来源方法之前,我将首先讨论来自 Ron Royston 的答案。并显示可能的问题/颠簸。
Ron Royston's answer
您已经指出了这种方法的问题:
this doesn't work because if the frame has rounded corners like this one, the screenshot can still peek through depending on the background-size
So add
border-radius
to the image element if it needs rounded corners, right?
border-radius
仅到
background-image
.相反,您必须对容器本身执行此操作。
border-radius
所以它不会剪切图像,缩放
background-image
下来,你准备好了,对吧?
cover
或类似
background-size
的东西.除非您的图像完全适合智能手机图像的边框,否则您会遇到麻烦。另外,
border-radius
如果您缩小背景图像,因为它不再接触边界,则已过时。
.colorClassProxy {
display: none
}
.itemBox,
.itemBox>* {
position: absolute;
box-sizing: border-box;
}
.itemBox {
background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
border-radius: 15px;
background-size: 95% 95%;
background-repeat: no-repeat;
background-position: center;
}
.backgroundColorBox,
.backgroundGraphicBox,
.foregroundBox,
.frameBox {
width: 100%;
height: 100%;
background-size: contain;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">
<div class="backgroundColorBox" style="width: 163px; height: 335px; top: 17px; left: 4px; -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E"); background-size: cover;"></div>
<div class="frameBox" data-natural-width="1528.64" data-natural-height="3224.29" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTI4LjY0IiBoZWlnaHQ9IjMyMjQuMjkiIHZpZXdCb3g9IjAgMCAxNTI4LjY0IDMyMjQuMjkiIGRhdGEtaHAtY29sb3ItcHJlcGFyZWQ9InRydWUiIHN0eWxlPSItLWhwLWNvbG9yLTluYXo1Z0JWLTE6cmdiKDI1NSwgMjU1LCAyNTUpOyAtLWhwLWNvbG9yLTluYXo1Z0JWLTI6dXJsKFwjY29sb3ItOW5hejVnQlYtMik7Ij48cmFkaWFsR3JhZGllbnQgaWQ9ImNvbG9yLTluYXo1Z0JWLTIiIGRhdGEtY3NzPSJyYWRpYWwtZ3JhZGllbnQocmdiKDY3LCA2NywgNjcpLCByZ2IoMCwgMCwgMCkpIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI3MC43MSUiPjxzdG9wIHN0b3AtY29sb3I9InJnYig2Nyw2Nyw2NykiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMCwwLDApIiBvZmZzZXQ9IjEwMCUiLz48L3JhZGlhbEdyYWRpZW50Pjx0aXRsZT5Bc3NldCAyPC90aXRsZT48cGF0aCBkPSJNODU3Ljc4LDcyLjY4SDY3MC44NmMtNy42NCwwLTEzLjg1LDUuOTEtMTMuODUsMTMuMjFzNi4yMSwxMy4yMSwxMy44NSwxMy4yMUg4NTcuNzhjNy42NiwwLDEzLjg1LTUuOTEsMTMuODUtMTMuMjFTODY1LjQ0LDcyLjY4LDg1Ny43OCw3Mi42OFoiIGZpbGw9IiNlOGVlZWYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9ImZpbGw6IHZhcigtLWhwLWNvbG9yLTluYXo1Z0JWLTEpOyIvPjxwYXRoIGQ9Ik0xNTE0Ljc5LDc4Ni4yNlYxNjUuMTdDMTUxNC43OSw3My45NSwxNDM3LjI5LDAsMTM0MS43MiwwSDE4Ni45MkM5MS4zMywwLDEzLjg1LDczLjk1LDEzLjg1LDE2NS4xN1Y0NzUuNzFDNi4xOSw0NzUuNzEsMCw0ODEuNjIsMCw0ODguOTJWODU4LjkzYzAsNy4zLDYuMTksMTMuMjEsMTMuODUsMTMuMjF2MTMyLjE1QzYuMTksMTAwNC4yOSwwLDEwMTAuMiwwLDEwMTcuNXYxOTguMjFjMCw3LjMxLDYuMTksMTMuMjIsMTMuODUsMTMuMjJWMzA1OS4xYzAsOTEuMjMsNzcuNDgsMTY1LjE5LDE3My4wNywxNjUuMTloMTE1NC44Yzk1LjU3LDAsMTczLjA3LTczLjk2LDE3My4wNy0xNjUuMTlWMTAxNy41YzcuNjQsMCwxMy44NS01LjkxLDEzLjg1LTEzLjIxVjc5OS40N0MxNTI4LjY0LDc5Mi4xNywxNTIyLjQzLDc4Ni4yNiwxNTE0Ljc5LDc4Ni4yNlpNNjcwLjg2LDcyLjY4SDg1Ny43OGM3LjY2LDAsMTMuODUsNS45MSwxMy44NSwxMy4yMVM4NjUuNDQsOTkuMSw4NTcuNzgsOTkuMUg2NzAuODZjLTcuNjQsMC0xMy44NS01LjkxLTEzLjg1LTEzLjIxUzY2My4yMiw3Mi42OCw2NzAuODYsNzIuNjhabTY4OC40OCwzMDMyLjY3SDE2OS4zMmMtNjguODQsMC0xMjQuNjEtNTMuMjQtMTI0LjYxLTExOC45M1YyNjQuMjljMC02NS42OSw1NS43Ny0xMTguOTQsMTI0LjYxLTExOC45NEgxMzU5LjM0YzY4LjgxLDAsMTI0LjYxLDUzLjI1LDEyNC42MSwxMTguOTRsLjAxLDI3MjIuMTNDMTQ4My45NiwzMDUyLjExLDE0MjguMTYsMzEwNS4zNSwxMzU5LjM0LDMxMDUuMzVaIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0eWxlPSJmaWxsOiB2YXIoLS1ocC1jb2xvci05bmF6NWdCVi0yKTsiLz48L3N2Zz4=);"
data-inner-natural-left="41.7" data-inner-natural-top="142.4" data-inner-natural-width="1445.2" data-inner-natural-height="2965.9"><iframe class="colorClassProxy"></iframe></div>
</div>
/*====Added this part====*/
.display-image {
width: 165px;
height: 340px;
display: block;
background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"');
background-size: cover;
margin-top: 15px;
margin-left: 5px;
border-radius: 10px;
}
/*=======================*/
.colorClassProxy {
display: none
}
.itemBox,
.itemBox>* {
position: absolute;
box-sizing: border-box;
}
.backgroundColorBox,
.backgroundGraphicBox,
.foregroundBox,
.frameBox {
width: 100%;
height: 100%;
background-size: contain;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">
<!--====Added this line====-->
<div class="display-image" alt=""></div>
<!--=======================-->
<!--====Removed the clipping path====-->
<div class="frameBox" data-natural-width="1528.64" data-natural-height="3224.29" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTI4LjY0IiBoZWlnaHQ9IjMyMjQuMjkiIHZpZXdCb3g9IjAgMCAxNTI4LjY0IDMyMjQuMjkiIGRhdGEtaHAtY29sb3ItcHJlcGFyZWQ9InRydWUiIHN0eWxlPSItLWhwLWNvbG9yLTluYXo1Z0JWLTE6cmdiKDI1NSwgMjU1LCAyNTUpOyAtLWhwLWNvbG9yLTluYXo1Z0JWLTI6dXJsKFwjY29sb3ItOW5hejVnQlYtMik7Ij48cmFkaWFsR3JhZGllbnQgaWQ9ImNvbG9yLTluYXo1Z0JWLTIiIGRhdGEtY3NzPSJyYWRpYWwtZ3JhZGllbnQocmdiKDY3LCA2NywgNjcpLCByZ2IoMCwgMCwgMCkpIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI3MC43MSUiPjxzdG9wIHN0b3AtY29sb3I9InJnYig2Nyw2Nyw2NykiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMCwwLDApIiBvZmZzZXQ9IjEwMCUiLz48L3JhZGlhbEdyYWRpZW50Pjx0aXRsZT5Bc3NldCAyPC90aXRsZT48cGF0aCBkPSJNODU3Ljc4LDcyLjY4SDY3MC44NmMtNy42NCwwLTEzLjg1LDUuOTEtMTMuODUsMTMuMjFzNi4yMSwxMy4yMSwxMy44NSwxMy4yMUg4NTcuNzhjNy42NiwwLDEzLjg1LTUuOTEsMTMuODUtMTMuMjFTODY1LjQ0LDcyLjY4LDg1Ny43OCw3Mi42OFoiIGZpbGw9IiNlOGVlZWYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9ImZpbGw6IHZhcigtLWhwLWNvbG9yLTluYXo1Z0JWLTEpOyIvPjxwYXRoIGQ9Ik0xNTE0Ljc5LDc4Ni4yNlYxNjUuMTdDMTUxNC43OSw3My45NSwxNDM3LjI5LDAsMTM0MS43MiwwSDE4Ni45MkM5MS4zMywwLDEzLjg1LDczLjk1LDEzLjg1LDE2NS4xN1Y0NzUuNzFDNi4xOSw0NzUuNzEsMCw0ODEuNjIsMCw0ODguOTJWODU4LjkzYzAsNy4zLDYuMTksMTMuMjEsMTMuODUsMTMuMjF2MTMyLjE1QzYuMTksMTAwNC4yOSwwLDEwMTAuMiwwLDEwMTcuNXYxOTguMjFjMCw3LjMxLDYuMTksMTMuMjIsMTMuODUsMTMuMjJWMzA1OS4xYzAsOTEuMjMsNzcuNDgsMTY1LjE5LDE3My4wNywxNjUuMTloMTE1NC44Yzk1LjU3LDAsMTczLjA3LTczLjk2LDE3My4wNy0xNjUuMTlWMTAxNy41YzcuNjQsMCwxMy44NS01LjkxLDEzLjg1LTEzLjIxVjc5OS40N0MxNTI4LjY0LDc5Mi4xNywxNTIyLjQzLDc4Ni4yNiwxNTE0Ljc5LDc4Ni4yNlpNNjcwLjg2LDcyLjY4SDg1Ny43OGM3LjY2LDAsMTMuODUsNS45MSwxMy44NSwxMy4yMVM4NjUuNDQsOTkuMSw4NTcuNzgsOTkuMUg2NzAuODZjLTcuNjQsMC0xMy44NS01LjkxLTEzLjg1LTEzLjIxUzY2My4yMiw3Mi42OCw2NzAuODYsNzIuNjhabTY4OC40OCwzMDMyLjY3SDE2OS4zMmMtNjguODQsMC0xMjQuNjEtNTMuMjQtMTI0LjYxLTExOC45M1YyNjQuMjljMC02NS42OSw1NS43Ny0xMTguOTQsMTI0LjYxLTExOC45NEgxMzU5LjM0YzY4LjgxLDAsMTI0LjYxLDUzLjI1LDEyNC42MSwxMTguOTRsLjAxLDI3MjIuMTNDMTQ4My45NiwzMDUyLjExLDE0MjguMTYsMzEwNS4zNSwxMzU5LjM0LDMxMDUuMzVaIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0eWxlPSJmaWxsOiB2YXIoLS1ocC1jb2xvci05bmF6NWdCVi0yKTsiLz48L3N2Zz4=);"
data-inner-natural-left="41.7" data-inner-natural-top="142.4" data-inner-natural-width="1445.2" data-inner-natural-height="2965.9"><iframe class="colorClassProxy"></iframe></div>
</div>
Looking for an answer drawing from credible and/or official sources.
skew()
一起工作(CSS),但这非常、非常、非常难以确定。此外,如果您只是将它放在图像上,您将遇到与之前剪切路径相同的问题。所以这似乎不是解决方案。
z-index
. skew
和
transform
直到没有人注意到图像。但这似乎不是“最清晰”的方式吗?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.display-image {
width: 184px;
height: 322px;
display: block;
background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"');
background-size: cover;
top: 165px;
left: 219px;
position: absolute;
transform: rotate(0.2deg);
z-index: -1;
}
.itemBox {
position: relative;
box-sizing: border-box;
}
.frameBox {
z-index: 1;
}
<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">
<!--====Added this line====-->
<div class="display-image" alt=""></div>
<!--=======================-->
<!--====Removed the clipping path====-->
<div class="frameBox"><img alt="" src="https://i.imgur.com/jbHkPuf.png"></div>
</div>
canvas
.如您所见
here可以根据自己的喜好使用它来扭曲图像。您必须在
canvas
中绘制整个“智能手机内手”图片。然后在需要的坐标上绘制应该在显示器上的图像。但是您必须决定是否值得花时间,因为它相当耗时、复杂且代码很多。我决定它不是,这就是为什么没有工作的例子。此外,您不能只使用
background-size: cover
之类的东西。因此,如果您不想编写大量 JS 垃圾,则必须将图像裁剪为智能手机大小。在我看来,之前的方法是最好的方法。
关于javascript - 如何在不流过帧的情况下在帧图像内渲染屏幕截图/图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56088669/
图像采集源除了显示控件(上一篇《.NET 控件转图片》有介绍从界面控件转图片),更多的是窗口以及屏幕。 窗口截图最常用的方法是GDI,直接上Demo吧: 1 private
我正在尝试编写一个程序来使用全局热键获取屏幕截图。下面是相应的代码: from datetime import datetime import os from pynput import keyboa
我正在构建一个应用程序,它应该为任何具有 Android 4 及更高版本的无根设备实现屏幕~镜像~,2 帧/秒就足够了。 我正在尝试使用 ADB“framebuffer:”命令来抓取设备屏幕截图 AD
如何使用 C++ 捕获屏幕截图?我将使用 Win32。 请不要使用 MFC 代码。 最佳答案 #include "windows.h" // should be less than and great
代码如下: import java.awt.Dimension; import java.awt.Rectangle; import java.awt.Robot; import java.aw
我目前正在构建一个 Google Chrome 扩展程序,该扩展程序可以从不同页面获取多个屏幕截图并将其发布到端点上。我遇到的问题是时间不对。我的意思是,在页面停止加载之前就太早截取屏幕截图了。其次,
我有一个 View Controller ,其中导航栏是透明的。我的下一个 View 是表格 View ,其中导航栏是白色的。 为了停止不需要的动画,我在表格 View 的“viewDidDissap
我正在尝试从多个 URL 制作屏幕截图。我的代码工作正常,但结果我得到了事件窗口的图像。但我需要带有浏览器顶部的完整屏幕截图(URL) file = open('links.txt', 'r', en
我正在尝试(并实现)获取屏幕截图: robot = new Robot(); BufferedImage biScreen = robot.createScreenCapture(rectScreen
是否有任何应用程序可以拍摄 android 设备的视频/屏幕截图。我知道在桌面上捕获屏幕视频/图像的软件很少,例如 camtasia、snagit。 Android 设备有类似的东西吗? 我知道使用
想要捕获可能处于非事件状态的选项卡的图像。 问题是,当使用此处显示的方法时,选项卡通常在捕获完成之前没有时间加载,从而导致失败。 chrome.tabs.update() 回调在标签页被捕获之前执行。
我想在新的 tkinter 窗口 (TopLevel) 中显示我的屏幕截图,但我不想将其保存在电脑上。当我保存它时它工作正常但是当我尝试从内存加载屏幕截图时出现错误:图像不存在。 我的主窗口是root
我正在 try catch 我当前所在的屏幕,因此当我覆盖下一个 View Controller 时,我可以使它成为它后面的 ImageView 并使其显示为半透明。这是有效的,但现在它在中间产生了一
我正在寻找将 docx(以及后来的 excel 和 powerpoint)文档的第一页转换为图像的方法。我宁愿不手动解析文档的整个 xml,因为这看起来工作量很大;) 所以我想我只是想收集一些关于如何
好吧,碰巧我正在编写一个程序来截取一些屏幕截图,并且在处理另一个进程已经在使用的文件时遇到了一些困难,希望有人能帮助我找到一种方法来“关闭”这个进程或启发我如何继续. //Create a new b
我即将在 App Store 上发布我的应用程序,我想截取我的应用程序的屏幕截图,但状态栏中没有所有信息,例如运营商和 Debug模式等。 我知道 Marshmallow 有一个 System UI
UIGraphicsBeginImageContext(self.reportList.frame.size); CGRect tableViewFrame = self.reportList.fra
是否有任何简洁的方法来访问 android 设备的屏幕截图以编程方式。我正在寻找大约 15-20fps。 我找到了一个代码android\generic\frameworks\base\service
好的,我正在尝试为多个网站运行多个屏幕截图!我已经获得了多个站点的一个屏幕截图,我还可以获得一个站点的多个 Viewport 屏幕截图,但我有 34 个站点需要这样做!那么有人知道用 casperjs
我正在为 iOS 制作一个贴纸包,在将其提交到 App Store 之前,我需要包含至少一张来自 5.5 英寸 iPhone 和 12.9 英寸 iPad Pro 的应用截图。这些都是我没有的设备。
我是一名优秀的程序员,十分优秀!