Question

我有一个带有背景图片的网页（在我的例子中只是红色）和一行应该有背景颜色（在我的示例中为蓝色）和一个100％。

问题是蓝色条内部应该有一个透明的标识（固定宽度为200px），但透过身体的背景图像（在我的例子中为红色）应该是透明的。

示例：

body {
  background-color: red;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.row {
  width: 100%;
  height: 40px;
  background-color: blue;
}

.logo {
  width: 200px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 auto;
}

<div class="row">
  <div class="logo">
    Should be transparent to the red background
  </div>
</div>

https://jsfiddle.net/uamgevLo/2/

有关如何做到这一点的任何建议吗？

Answer 1

我不知道这是不是你想要的。

https://jsfiddle.net/uamgevLo/5/

您可以将行部分拆分为3部分。左栏，右栏和徽标框。对于左右栏，我将使用伪元素（前后），并将其置于绝对位置

.logo {
  width:200px;
  height:20px;
  margin: 0 auto;
  position: relative;
}

.logo::before {
  content: '';
  width: calc(50vw - 100px);
  height: 20px;
  position: absolute;
  right: 100%;
  top: 0;
  background-color: blue;
}

.logo::after {
  content: '';
  width: calc(50vw - 100px);
  height: 20px;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: blue;
}

Answer 2

您可以使用flex并将顶行分成三行来实现此目的。

＆＃13;

body {
  background-color: red;
  padding: 0px;
  margin: 0px;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 40px;
}

#Lft,#Rgt{
  -ms-flex: 1;
  -webkit-box-flex: 1;
  flex: 1;
  background-color: blue;
}

.logo {
  -ms-flex: 0 0 200px;
  -webkit-box-flex: 1;
  flex: 0 0 200px;
  background-color: rgba(255, 255, 255, 0.5);
}

＆＃13;

<div class="row">
  <div id="Lft"></div>
  <div class="logo">
    Should be transparent to the red background
  </div>
  <div id="Rgt"></div>
</div>

＆＃13;

Answer 3

您可以使用linear-gradient解决此问题，因此您不必将.row拆分为列：

＆＃13;

body {
  background-color: red;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.row {
  width: 100%;
  height: 40px;
  background: linear-gradient(
    to right, 
    blue, 
    blue calc(50% - 100px), 
    transparent calc(50% - 100px), 
    transparent calc(50% + 100px), 
    blue calc(50% + 100px), 
    blue
  );
}
.logo {
  width: 200px;
  height: 40px;
  margin: 0 auto;
}

＆＃13;

<div class="row">
  <div class="logo">Should be transparent to the red background</div>
</div>

＆＃13;

使父div透明，但仅限于子节点

3 个答案: