在不改变高度或位置的情况下屏蔽<img/>

Question

我有一个页面here，其中包含垂直和水平居中的图像。

＆＃13;

＆＃13;

body {
  margin: 0px;
  height: 100%;
}

#background {
  z-index: -1000;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#background-img {
  width: calc(100% + 200px);
  height: calc(100% + 200px);
  margin-left: -100px;
  margin-top: -100px;
  filter: blur(50px);
}

#body-container {
  height: 100%;
  display: table;
  width: 100%;
}

#display {
  display: table-cell;
  height: 100%;
  margin: 0 auto;
  height: auto;
  position: relative;
  vertical-align: middle;
}

#display-img {
  max-width: 100%;
  border-style: solid;
  border-color: transparent;
  border-width: 33px;
  display: block;
  text-align: center;
  overflow: hidden;
  opacity: .5;
/*  height: 50px;*/
}


#display-img-placeholder {
  max-width: 100%;
  border-style: solid;
  border-color: white;
  border-width: 33px;
  display: block;
  text-align: center;
/*
  width: 930px;
  max-width: calc(100% - 66px);
  margin: 0 auto;
*/
  filter: contrast(1.5);
/*  position: relative;*/
  position: absolute;
  z-index: -1;
}

#display-img-placeholder img {
  width: 100%;
  opacity: 0;
}

#display-img img {
  width: 100%;
}

#img-container {
  max-width: calc(100% - 66px);
/*
  border-style: solid;
  border-color: white;
  border-width: 33px;
*/
  display: block;
  text-align: center;
  width: 930px;
  max-width: calc(100% - 66px);
  margin: 0 auto;
  position: relative;
}

＆＃13;

    <div id="background">
      <img id="background-img" src="http://iamwasserman.com/Portfolio/hoh.jpg">
    </div>
    <div id="body-container">
      <div id="display">
        <div id="img-container">
          <div id="display-img-placeholder">
            <img src="http://iamwasserman.com/Portfolio/hoh.jpg">
          </div>
          <div id="display-img">
            <img src="http://iamwasserman.com/Portfolio/hoh.jpg">
          </div>
        </div>
        <h3 id="time-stamp"></h3>
        <div id="dots">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

我需要一种方法来裁剪不会影响定位的底部15％的图像（因此它必须保持相同的尺寸，但使底部透明）。我尝试在其周围放置一个容器<div>并更改高度，然后更改图像的垂直位置。关于如何做到这一点的想法？

S.A。 1和2

Answer 1

是你喜欢的吗？

#wrap{/* to demonstrate the image on top is partially transparent */
  background-color: rgba(128,128,255,128);
}
#bg {
  background: url(https://i.stack.imgur.com/NgNDR.jpg) no-repeat;
  background-position: -288px, -115px;
/* 1437x768 */
  width: 862px;
  height: 538px;
  border: 2px solid red;
  margin: 115px 288px ;
}
#clip {
/* this is deprecated
  clip: rect( 115px, 288px,  115px, 288px );
*/
/* this works */
clip-path:  inset( 115px 288px  115px 288px );
}

<div id="wrap">
<!--
<img src="https://i.stack.imgur.com/NgNDR.jpg" />

<div id="bg">
</div>
-->

<img src="https://i.stack.imgur.com/NgNDR.jpg" id="clip"/>

</div>

背景位置

基本上这可以使您的图像具有原始大小 但是在开始时将链接的图像定位为自我计算的度量。

我首先计算顶部的-15％，然后调整左侧偏移。后来宽度为我原来大小和偏移量之差的2倍。

课程的手动计算可以通过javascript自动完成。

剪辑

已经老了，但只能用css工作;你甚至可以做