将图像蒙版成多个部分，无需多次加载图像

我想拍摄一张图像并将其分割为多个自包含的“部分”。我需要能够做到这一点，而无需多次加载图像，因为在一定数量的部分之后，这将带来很多带宽。为了这个问题，我想将图像分成4个象限，但最好是可扩展的。
将图像蒙版成多个部分，无需多次加载图像

你注意到不只是一个白色的“窗框”覆盖，在离开左上右上象限开始。

这是我做的一个小提琴，它完成了我想要的，除了它必须为所有4象限加载图像。 https://jsfiddle.net/gm4os1Ld/

#first{ 
    position:absolute; 
    clip: rect(0, 217px, 159px, 0); 
} 

#second{ 
    position:absolute; 
    left: 20px; 
    clip: rect(0px,435px,159px,217px); 
} 
#third{ 
    position:absolute; 
    top: 20px; 
    clip: rect(159px, 217px, 318px, 0); 
} 
#fourth{ 
    position:absolute; 
    left: 20px; 
    top: 20px; 
    clip: rect(159px,435px,318px,217px); 
}

是否有可能做到这一点只用一个形象负荷？ CSS或Jquery解决方案都很好。

来源

2016-09-30 DasBeasto

为什么你不只是加载你的图像一次，用“窗口覆盖它框架“？这样你只需要处理每个窗口。 –

“我需要能够做到这一点，而无需多次加载图像，因为在一定数量的部分之后，这将带来很多带宽。”这不是浏览器的工作方式。通常情况下，一旦第一次加载图像，浏览器将缓存它。这意味着它在本地存储一段时间，随后的请求会从文件系统加载它，而不是多次重新加载它。 –

@Baldráni因为那么我会隐藏图像的一些像素，除非我不明白你的意思？ – DasBeasto

我回应了上述评论者之一：你不需要这样做。浏览器足够智能，不会重新下载相同的资源，以便在文档中多次使用。您只需调用一次图像，而且您需要在页面中进一步使用该图像。

（除非该图像的头部已经被设置为“无缓存”，但这是不可能的大部分时间）

来源

2016-09-30 22:11:41

约在CSS背景 - 设置图像

什么先前的评论职位？它会是一款益智游戏吗？ http://codepen.io/gc-nomade/pen/JRAdOm（使用一些弯曲和动画来移动每个可见部分），你的脚本将要切换的类名（容易的不仅仅是背景图片）只有一次

您可以使用background-position，并optionnaly background-size和一些动画来移动每个部分。 （从旧codepen http://codepen.io/gc-nomade/pen/kFGya/启发）

#mybox { 
 
    width:456px; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
.splitImg { 
 
    padding: 5px; 
 
    background: url(http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg) no-repeat; 
 
    height: 159px; 
 
    width: 218px;animation : reorder 5s infinite alternate ; 
 
    background-clip: content-box; 
 
    background-size:195%; 
 
} 
 
#first { 
 
    background-position:5px 5px; 
 
} 
 
#second { 
 
    background-position:-213px 5px; 
 
    animation-delay:1.25s 
 
} 
 
#third { 
 
    background-position:5px -154px; 
 
    animation-delay:2.5s 
 
} 
 
#fourth{ 
 
    background-position:-213px -154px; 
 
    animation-delay:3.75s 
 
} 
 
@keyframes reorder { 
 
    from { 
 
    order:1; 
 
    } 
 
    25% { 
 
    order:2 
 
    } 
 
    50% { 
 
    order:3 
 
    } 
 
    75% {order:4; 
 
    } 
 
    to { 
 
    order:1; 
 
    } 
 
}

<div id="mybox"> 
 
    <div id="first" class="splitImg"></div> 
 
    <div id="second" class="splitImg"></div> 
 
    <div id="third" class="splitImg"></div> 
 
    <div id="fourth" class="splitImg"></div> 
 
</div>

来源

2016-09-30 22:41:25

.grid { 
 
    width:400px; 
 
    height:400px; 
 
    display: inline-block; 
 
    background:url("https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg"); 
 
    background-size:0; 
 
    background-repeat:no-repeat; 
 
} 
 
.grid>div { 
 
    display:inline-block; 
 
    width:48%; 
 
    height:48%; 
 
    background:inherit; 
 
    background-size:200% 200%; 
 
    transition:all 1s linear; 
 
} 
 
#first{} 
 
#second{ background-position-x:100%;} 
 
#third { background-position-y:100%;} 
 
#fourth{ background-position-x:100%; background-position-y:100%;} 
 

 
.grid>div:hover { 
 
    transform:rotate(360deg); 
 
}

<div class="grid"> 
 
<div id="first"></div> 
 
<div id="second"></div> 
 
<div id="third"></div> 
 
<div id="fourth"></div> 
 
</div>

来源

2016-09-30 22:47:18 Malk

将图像蒙版成多个部分，无需多次加载图像

回答

相关问题