代码之家 › 专栏 › 技术社区 › Sébastien Gicquel

背景父容器较小,图像部分在外部

twitter-bootstrap css html

Sébastien Gicquel · 技术社区 · 8 年前

我在使用一个自定义模板,我必须创建一个这样的块:

桌面:

手机

我很难得到这个结果:父容器的背景色较小,图像部分在外部。

目前,我已经设法做到了这一点,但我认为这并不好,因为我必须设置一些像素的最大高度和图像上的绝对位置。

#block-devis-home {
  margin: 0 auto;
  position: relative;
  z-index: 1;
  max-width: 400px;
  height: 450px;
  background: #0e182c;
}

#block-devis-home img {
  position: absolute;
  left: -200px;
  top: 30px;
  width: 100%;
}

.block-devis-home-text {
  padding: 0 30px;
}

#block-devis-home h2,
#block-devis-home p {
  color: #fff;
}

#block-devis-home h2 {
  color: #fff;
  margin: 56px 0 36px 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <section class="block-home">

    <div class="row">

      <div id="block-devis-home">

        <div class="col-md-6">

          <img class="img-full-width" src="http://via.placeholder.com/100x50">

        </div>

        <div class="col-md-6">

          <div class="block-devis-home-text">

            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio mauris justo. Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio mauris justo.</p>

          </div>

        </div>

        <div class="clearfix"></div>

      </div>

    </div>

  </section>

</div>

我还有别的方法可以探索吗?

2 回复 | 直到 8 年前

Dhaval Jardosh 8 年前

只需使用 border:white 在父元素的背景上。

.image {
  /*   position:absolute; */
  /* right:0; */
}

.image>img {
  position: relative;
  top: 20px;
  height: 200px;
  left: -10vw;
}

.rightbox {
  text-align: center;
  color: white;
}

.parent {
  margin-top: 20px;
  background: red;
  /*   border-left:100px solid white; */
  /*   margin:0px 30px; */
  border-left: 15vw solid white;
  border-right: 2vw solid white;
  width: 100%;
  height: 240px;
}

.widthAdjust {
  width: 100% !important;
}

.block-devis-home-text {
  height: 240px;
}

@media only screen and (max-width: 991px) {
  .parent {
    border: 0;
    height: auto;
    margin-top: 80px;
  }
  .image {
    text-align: center;
    border-left: 20px solid white;
    border-right: 20px solid white;
  }
  .image>img {
    /*     position: absolute; */
    top: -50px;
    /*     border:1px solid blue; */
    left: 0;
  }
  .block-devis-home-text {
    height: max-content;
  }
  .rightbox {
    border-left: 20px solid white;
    border-right: 20px solid white;
    margin-top: -50px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section class="block-home parent">

  <div class="container widthAdjust">
    <div class="row flex">
      <div class="col-md-6 image">

        <img class="img-full-width" src="http://via.placeholder.com/100x50">

      </div>

      <div class="col-md-6 rightbox">

        <div class="block-devis-home-text">
          <div class="content">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio mauris justo. Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio mauris justo.</p>
          </div>

        </div>


      </div>

    </div>
  </div>

</section>

puja 8 年前

    You can try this.
    css:
     body,html{
     height:100%;
     margin:0;
     padding:0;
     }

.float-left{
float:left;
}
.block-home{
float:none !important;
margin:auto;
height:250px;
background-color:red;
position:relative;

}
.col-md-6.text-center{
    height: 100%;
    float: right;
}
.text-center h2{
  font-size:26px;
}
.image-class{
 position: absolute;
    top: 0;
    height: 75%;
    background: #afb8bf;
    font-family: monospace;
    background-position: center center;
    left: -8%;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(https://top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg);
    background-size: cover;

}
 @media only screen and (max-width : 760px) and (min-width : 480px) {
.image-class {
     top: 0;
    height: 50%;
    background: #afb8bf;
    font-family: monospace;
    background-position: center center;
    left: 24%;
    display: block;
    transform: translateY(-25%);
    background-image: url(https://top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg);
    background-size: cover;
}
.col-md-6.text-center {
    height: 50%;

}
    }
HTML:


<div class="container-fluid">

  <section class="block-home col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
   <div class="image-class col-lg-6 col-md-6 col-sm-6 col-xs-6">

  </div>

   <section class="text-center col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio
            mauris justo. Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio mauris justo.</p>

   </section>

  </section>

</div>
    And import bootstrap cdn.