时间戳

首页 > 解决方案 > 如何从图像的顶部和底部剪切一个矩形？

javascript - 如何从图像的顶部和底部剪切一个矩形？

问题描述

例子

我正在尝试从图像中剪切一个矩形。请告诉我最好的方法来做到这一点。我需要支持 IE 11。（没有剪辑路径）。

我已经尝试过这样做，但对结果不是很满意。

body {
  margin: 0;
}

.block {
  height: 400px;
  display: flex;
}

.block-image,
.block:before,
.block:after {
  content: "";
  position: relative;
  height: 100%;
  background-image: url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80");
  background-size: 100vw auto;
  background-repeat: no-repeat;
}

.block:before {
  top: 50px;
  flex: auto;
  background-position: left top -50px;
}

.block:after {
  flex: auto;
  background-position: right top;
}

.block-image {
  flex: 1 1 300px;
  max-width: 300px;
  background-position: center top;
}
<div class="block">
  <div class="block-image"></div>
</div>

标签： javascripthtmlcss

解决方案

我会优化如下代码：

body {
  margin: 0;
  background:pink;
}

.block {
  margin:50px 0;
  height: 400px;
  background:url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80") no-repeat;
  background-size:0 0;
}

.block:before,
.block:after {
  content: "";
  float:left;
  height: 100%;
  background: inherit;
}

.block:before {
  width:30%;
  background-size:333.33% auto; /* 100%/0.3 */
  background-position:left 0 top 0;
  transform:translateY(-50px);
}

.block:after {
  width:70%;
  background-size:142.85% auto; /* 100%/0.7 */
  background-position:right 0 top -50px;
}
<div class="block">
</div>

使图像居中：

body {
  margin: 0;
  background:pink;
}

.block {
  margin:50px 0;
  height: 400px;
  background:url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80") no-repeat;
  background-size:0 0;
}

.block:before,
.block:after {
  content: "";
  float:left;
  height: 100%;
  background: inherit;
}

.block:before {
  width:30%;
  background-size:333.33% auto; /* 100%/0.3 */
  background-position:left center;
  transform:translateY(-50px);
}

.block:after {
  width:70%;
  background-size:142.85% auto; /* 100%/0.7 */
  background-position:right 0 top calc(50% - 50px);
}
<div class="block">
</div>

如果您想要更大的图像宽度：

body {
  margin: 0;
  background:pink;
}

.block {
  margin:50px 0;
  height: 400px;
  background:url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80") no-repeat;
  background-size:0 0;
}

.block:before,
.block:after {
  content: "";
  float:left;
  height: 100%;
  background: inherit;
}

.block:before {
  width:30%;
  background-size:500% auto; /* 150%/0.3 */
  background-position:left 25% top 50%;
  transform:translateY(-50px);
}

.block:after {
  width:70%;
  background-size:214.275% auto; /* 150%/0.7 */
  background-position:right 25% top calc(50% - 50px);
}
<div class="block">
</div>

这是使用 CSS 变量和calc(). 我知道您想支持 IE，但这仅用于演示目的，您可以轻松地使用上面示例中的计算值：

body {
  margin: 0;
  background:pink;
}

.block {
  --w:0.3;  /* width of left part (without unit and from 0 to 1 (1 = 100%) )*/
  --h:50px; /* height of the cut*/
  --s:1.5;  /* scale factor of the image (1 = 100% width of container)*/
  
  margin:calc(var(--h) + 10px) 0;
  height: 400px;
  background:url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80") 0/0 no-repeat;
}

.block:before,
.block:after {
  content: "";
  float:left;
  height: 100%;
  background: inherit;
}

.block:before {
  width:calc(var(--w)*100%);
  background-size:calc(var(--s) * (100%/var(--w)))  auto;
  background-position:
    left calc( 
          100% *
           ( (var(--s) - 1) /
             (2* (var(--s) - var(--w)) ) 
           ) 
          ) 
     top 50%;
  transform:translateY(calc(-1*var(--h)));
}

.block:after {
  width:calc(100%*(1 - var(--w)));
  background-size:calc(var(--s) * (100%/(1 - var(--w)))) auto;
  background-position:
   right calc( 
          100% *
           ( (var(--s) - 1) /
             (2* (var(--s) - 1 + var(--w)) ) 
           ) 
          )
   top calc(50% - var(--h));
}
<div class="block">
</div>

<div class="block" style="--s:2;--h:100px;--w:0.5">
</div>

<div class="block" style="--s:1.75;--h:150px;--w:0.8">
</div>

<div class="block" style="--s:3;--h:30px;--w:0.7">
</div>

位置的计算有点复杂，你可以参考下面的问题来理解它是如何工作的：Using percent values with background-position on a linear-gradient


clip-path为了保持这个答案的通用性，即使 IE 不支持，我也会考虑最合乎逻辑的方式

body {
  margin: 0;
  background:pink;
}

.block {
  --w:30%;  /* width of left part */
  --h:50px; /* height of the cut*/
  
  margin:10px 0;
  height: 400px;
  background:url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80") center/cover no-repeat;
  
  clip-path:polygon(
   0 0,var(--w) 0,var(--w) var(--h),100% var(--h),
   100% 100%,var(--w) 100%,var(--w) calc(100% - var(--h)),0 calc(100% - var(--h)));
}
<div class="block">
</div>

<div class="block" style="--h:100px;--w:50%">
</div>

<div class="block" style="--h:150px;--w:80%">
</div>

<div class="block" style="--h:30px;--w:70%">
</div>

推荐阅读