Question

我试图在图像顶部设置一个div，并在div中设置一个边框或另一个透明的div，以便您可以看到下面的图像。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div>
    <div class="place">Text to be searched</div>
    <div class="place">
      <div id="question">
        <input type="radio" value="yes">
        <input type="radio" value="no">
      </div>
    </div>
  </div>
  <div>
    <div class="place">Text to be searched
    </div>
    <div class="place">
      <div id="question">
        <input type="radio" value="yes">
        <input type="radio" value="no">
      </div>
    </div>
  </div>
</div>

＆＃13;

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;
}

.floater {
  width: 400px;
  height: 100px;
  background: blue;
}

.title,
.description {
  padding: 10px
}

.transparent-through {
  border-bottom: 4px solid black;
  width: 90%;
  margin: auto;
}

＆＃13;

我正试图让后面的＆＃34;透明＆＃34; div透明，这样你就可以看到父div下的图像。

，示例在这里：

Answer 1

您可以使用linear-gradient使用多个背景来创建透明部分，而无需额外的元素：

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  background: 
  linear-gradient(blue,blue) 0 0/100% 50px no-repeat,
  linear-gradient(blue,blue) 0 100%/100% 50px no-repeat,
  linear-gradient(blue,blue) 0 0/50px 100% no-repeat,
  linear-gradient(blue,blue) 100% 0/50px 100% no-repeat;
 
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

使用clip-path：

，这是一个更奇怪的想法

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 29%, 75% 29%, 75% 69%, 20% 69%, 20% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 29%, 75% 29%, 75% 69%, 20% 69%, 20% 100%, 100% 100%, 100% 0%);
  background:blue;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

另一个使用inset box-shadow：

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  box-shadow:0 0 0 50px blue inset;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

您还可以考虑带边框的伪元素：

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  position:relative;
  width: 400px;
  z-index:0;
}
.floater:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-width:50px 20px 50px 20px;
  border-style:solid;
  border-color:blue;
  z-index:-1;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Answer 2

trik可能是从边框元素的阴影中绘制背景颜色。（参见css评论）

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  height: 100px;
  overflow: hidden; /*keep children shadow inside*/
  margin: auto
}

.title,
.description {
  padding: 10px;
  position: relative; /* on top of sibblings shadows*/
}

.transparent-through {
  border-bottom: 4px solid transparent;
  box-shadow: 0 0 0 100px blue; /* tune color and area to fill unblured. here set to blue and 100px around */
  width: 90%;
  margin: auto;
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="transparent-through"></div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Answer 3

将蓝色背景创建为透明元素的阴影。

设置漂浮物上隐藏的溢出物以防止其向外扩展

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  margin-top: 20px;
  width: 400px;
  height: 150px;
  overflow: hidden;
}

.title,
.description {
  padding: 10px
}

.transparent-through {
  height: 60px;
  width: 90%;
  margin: auto;
  box-shadow: 0px 0px 0px 100px blue;
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="transparent-through"></div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Answer 4

使父div位置：relative和z-index：0并使子div位置：absolute和z-index：10

这是一个例子，按照这个例子你可以做到。

.check
{
position:relative;
width:100%;
height:50%:
z-index:0;
}
.check img
{
width:100%;
height:50%;
}
.form-box
{
    position: absolute;
    top:0;
    right:0;
    background-color:rgba(255,255,255,0.8);
    z-index:10;
    height:100%;
    padding-top:40px;
    width:50%;
}

<html>
<div class="check">
<img src="https://cdn.vox-cdn.com/thumbor/th5YNVqlkHqkz03Va5RPOXZQRhA=/0x0:2040x1360/1200x800/filters:focal(857x517:1183x843)/cdn.vox-cdn.com/uploads/chorus_image/image/57358643/jbareham_170504_1691_0020.0.0.jpg">
</div>
<div class="form-box">
<h1>BISWAJIT</h1>
</div>

通过父div使div透明

4 个答案: