父div溢出隐藏时如何设置框阴影底部？

时间：2019-05-07 09:28:10

标签： html css html5 css3 box-shadow

大家好，我希望在没有div结构更改的情况下获得框阴影，我试图在内容列中设置框阴影，但是我设置为隐藏在优点框div中，因为我也想在主潜水悬停时将悬停背景图像div缩放除去隐藏的CSS而不是将背景图像潜水显示出来的主要div，所以我设置为隐藏的溢出。当您删除隐藏的溢流而不是显示阴影时这可能是阴影，但是我的背景图像比例效果显示不佳。这类问题有什么解决办法

.features-box {
                padding: 100px 0;
                background-color: rgba(56,74,100,.1);
            }
            .content {
                padding: 30px;
                background-color: #fff;
                position: relative;
            }
            .content:after {
                content: '';
                position: absolute;
                width: 100%;
                bottom: 0;
                height: 2px;
                left: 0;
                -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
                -ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
                box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
                z-index: 9;
            }
            .advantages-box {
                overflow: hidden;
            }
            .advantages-box .left {
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                transition: .3s;
            }
            .advantages-box:hover .left {
                -webkit-transform: scale(1.1);
                -moz-transform: scale(1.1);
                -ms-transform: scale(1.1);
                transform: scale(1.1);
            }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-10 advantages-box">
                        <div class="row h-100">
                            <div class="col-6 h-100 p-0 position-relative left" style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">
                            </div>
                            <div class="col-6 h-100 p-0 position-relative right">
                                <div class="content d-flex flex-column align-items-start text-left h-100">
                                    <h5>What is Lorem Ipsum one?</h5>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                    <h5>What is Lorem Ipsum two?</h5>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

2 个答案:

答案 0 :(得分：1)

为图像添加额外的元素，您只需要在其父对象上应用溢出：

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
  z-index: 9;
}

.advantages-box .left {
  overflow: hidden;
}

.advantages-box .left img {
  height: 100%;
  width: 100%;
  object-fit: none;
  transition: .3s;
}

.advantages-box:hover .left img {
  transform: scale(1.1);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 advantages-box">
        <div class="row h-100">
          <div class="col-6 h-100 p-0 position-relative left">
            <img src="http://placekitten.com/1000/500">
          </div>
          <div class="col-6 h-100 p-0 position-relative right">
            <div class="content d-flex flex-column align-items-start text-left h-100">
              <h5>What is Lorem Ipsum one?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
              <h5>What is Lorem Ipsum two?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

如果要保留背景图片：

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
  z-index: 9;
}

.advantages-box .left {
  overflow: hidden;
}

.advantages-box .left div {
  height:100%;
  background-position:center;
  background-repeat:no-repeat;
  transition: .3s;
}

.advantages-box:hover .left div {
  transform: scale(1.1);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 advantages-box">
        <div class="row h-100">
          <div class="col-6 h-100 p-0 position-relative left">
          <div style="background-image:url(http://placekitten.com/1000/500)"></div>
          </div>
          <div class="col-6 h-100 p-0 position-relative right">
            <div class="content d-flex flex-column align-items-start text-left h-100">
              <h5>What is Lorem Ipsum one?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
              <h5>What is Lorem Ipsum two?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

不更改HTML的另一种想法是依靠伪元素和继承作为背景：

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
  z-index: 9;
}

.advantages-box .left {
  overflow: hidden;
  position:relative;
  z-index:0;
}
.advantages-box .left:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  transition: .3s;
}

.advantages-box:hover .left:before {
  transform: scale(1.1);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 advantages-box">
        <div class="row h-100">
          <div class="col-6 h-100 p-0 position-relative left" style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">
          </div>
          <div class="col-6 h-100 p-0 position-relative right">
            <div class="content d-flex flex-column align-items-start text-left h-100">
              <h5>What is Lorem Ipsum one?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
              <h5>What is Lorem Ipsum two?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

答案 1 :(得分：1)

你不能！隐藏溢出意味着隐藏溢出。您必须重组HTML 

@import "compass/css3";

body {
    font-family: 'Open Sans', sans-sarif;
    margin: 0;
}

.container {
    background-color: $color6;
    text-align: center;
    padding: 30px;
}

.logo {
    height: 200px;
}

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06);
  -ms-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06);
  z-index: 9;
}

.advantages-box .image-wrapper {
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.advantages-box .image {
  -webkit-transition: transform .3s;
  -moz-transition: transform .3s;
  -ms-transition: transform .3s;
  transition: transform .3s;
}

.advantages-box:hover .image {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

相关问题
最新问题