Question

我正在开发一个自定义模板，我必须创建一个这样的块：

桌面：

移动

我很难获得这个结果：父容器的背景颜色较小，图像部分在外面。

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

还有其他方法可以探索吗？

Answer 1

只需在父元素的背景上使用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>

Answer 2

    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.

背景父母容器更小与部分外面的图象

2 个答案: