当父div隐藏溢出时,Div阴影被截止

时间:2016-09-08 05:03:09

标签: javascript jquery html css css3

我最近有一个问题certain portion of an image inside the div should only be displayed.。我根据自己的需要对其进行了修改。现在,当我在box-shadow上添加.img-card-container时,投影正在被切断。

请注意overflow:hidden上有.img-bg-container。这是裁剪背景图片。

这里是jsfiddle



.img-sub {
  height: 150px;
  overflow: hidden;
  width: 100%;
  display: block;
  position: relative;
}
.img-sub img {
  height: 100%;
  position: absolute;
  margin: 0 auto;
  left: -50%;
  width: auto;
}
.row.next-row {
  padding-top: 30px;
}
.img-card-caption {
  background-color: #fff;
  min-height: 60px;
  max-height: 60px;
  padding: 10px;
}
.img-card-caption h3 {
  font-size: 1em;
  margin: 0;
  padding: 0;
}
.img-card-caption span {
  color: #999;
}
.img-bg {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: -10;
}
.img-bg img {
  position: absolute;
  height: auto;
  width: 100%;
  left: -100%;
  right: -100%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  z-index: -10;
}
.img-bg-container {
  display: inline-block;
  overflow: hidden;
}
.img-sub img {
  height: 100%;
  position: absolute;
  margin: 0 auto;
  left: -50%;
  right: -50%;
  width: auto;
}
.img-card-container {
  -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row grid-container">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-5">
        <div class="row img-container img-featured">
          <div class="col-md-12">
            <a href="/posts/1">
              <img class="img-responsive img-thumbnail" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
            </a>
          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="row">
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
            <div class="img-bg">
              <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
            </div>
            <div class="img-card-container">
              <div class="img-card-item">
                <a href="/posts/1" class="img-sub">
                  <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                </a>
              </div>
              <div class="img-card-caption">
                <h3><a href="#">This is the video title</a></h3>
                <span>Spongebob Squarepants</span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
            <div class="img-bg">
              <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
            </div>
            <div class="img-card-container">
              <div class="img-card-item">
                <a href="/posts/1" class="img-sub">
                  <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                </a>
              </div>
              <div class="img-card-caption">
                <h3><a href="#">This is the video title</a></h3>
                <span>Spongebob Squarepants</span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
            <div class="img-bg">
              <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
            </div>
            <div class="img-card-container">
              <div class="img-card-item">
                <a href="/posts/1" class="img-sub">
                  <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                </a>
              </div>
              <div class="img-card-caption">
                <h3><a href="#">This is the video title</a></h3>
                <span>Spongebob Squarepants</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row next-row">
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
            <div class="img-bg">
              <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
            </div>
            <div class="img-card-container">
              <div class="img-card-item">
                <a href="/posts/1" class="img-sub">
                  <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                </a>
              </div>
              <div class="img-card-caption">
                <h3><a href="#">This is the video title</a></h3>
                <span>Spongebob Squarepants</span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
            <div class="img-bg">
              <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
            </div>
            <div class="img-card-container">
              <div class="img-card-item">
                <a href="/posts/1" class="img-sub">
                  <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                </a>
              </div>
              <div class="img-card-caption">
                <h3><a href="#">This is the video title</a></h3>
                <span>Spongebob Squarepants</span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
            <div class="img-bg">
              <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
            </div>
            <div class="img-card-container">
              <div class="img-card-item">
                <a href="/posts/1" class="img-sub">
                  <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                </a>
              </div>
              <div class="img-card-caption">
                <h3><a href="#">This is the video title</a></h3>
                <span>Spongebob Squarepants</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我对你的HTML结构和一些CSS更改进行了一些细微的更改。看看吧。

&#13;
&#13;
.img-sub {
  height: 150px;
  overflow: hidden;
  width: 100%;
  display: block;
  position: relative;
}
.img-sub img {
  height: 100%;
  position: absolute;
  margin: 0 auto;
  left: -50%;
  width: auto;
}
.row.next-row {
  padding-top: 30px;
}
.img-card-caption {
  background-color: #fff;
  min-height: 60px;
  max-height: 60px;
  padding: 10px;
}
.img-card-caption h3 {
  font-size: 1em;
  margin: 0;
  padding: 0;
}
.img-card-caption span {
  color: #999;
}
.img-bg {
  background-color: #fff;
  height: 150px;
  /* anyhow you have given fixed height in other divs */
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -10;
  overflow: hidden;
  /* prevent image from going out */
}
.img-bg img {
  position: absolute;
  height: auto;
  width: 100%;
  left: -100%;
  right: -100%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  z-index: -10;
}
.img-bg-container {
  margin-bottom: 15px;
  position: relative;
}
.img-sub img {
  height: 100%;
  position: absolute;
  margin: 0 auto;
  left: -50%;
  right: -50%;
  width: auto;
}
.img-card-container {
  -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row grid-container">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-5">
        <div class="row img-container img-featured">
          <div class="col-md-12">
            <a href="/posts/1">
              <img class="img-responsive img-thumbnail" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
            </a>
          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="row">
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="img-bg-container">
              <div class="img-bg">
                <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
              </div>
              <div class="img-card-container">
                <div class="img-card-item">
                  <a href="/posts/1" class="img-sub">
                    <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                  </a>
                </div>
                <div class="img-card-caption">
                  <h3><a href="#">This is the video title</a></h3>
                  <span>Spongebob</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="img-bg-container">
              <div class="img-bg">
                <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
              </div>
              <div class="img-card-container">
                <div class="img-card-item">
                  <a href="/posts/1" class="img-sub">
                    <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                  </a>
                </div>
                <div class="img-card-caption">
                  <h3><a href="#">This is the video title</a></h3>
                  <span>Spongebob</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="img-bg-container">
              <div class="img-bg">
                <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
              </div>
              <div class="img-card-container">
                <div class="img-card-item">
                  <a href="/posts/1" class="img-sub">
                    <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                  </a>
                </div>
                <div class="img-card-caption">
                  <h3><a href="#">This is the video title</a></h3>
                  <span>Spongebob</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row next-row">
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="img-bg-container">
              <div class="img-bg">
                <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
              </div>
              <div class="img-card-container">
                <div class="img-card-item">
                  <a href="/posts/1" class="img-sub">
                    <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                  </a>
                </div>
                <div class="img-card-caption">
                  <h3><a href="#">This is the video title</a></h3>
                  <span>Spongebob</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="img-bg-container">
              <div class="img-bg">
                <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
              </div>
              <div class="img-card-container">
                <div class="img-card-item">
                  <a href="/posts/1" class="img-sub">
                    <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                  </a>
                </div>
                <div class="img-card-caption">
                  <h3><a href="#">This is the video title</a></h3>
                  <span>Spongebob</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="img-bg-container">
              <div class="img-bg">
                <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
              </div>
              <div class="img-card-container">
                <div class="img-card-item">
                  <a href="/posts/1" class="img-sub">
                    <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
                  </a>
                </div>
                <div class="img-card-caption">
                  <h3><a href="#">This is the video title</a></h3>
                  <span>Spongebob</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;