Question

我有一个父div：

if (octalRadioButton.Checked) { if (!char.IsControl(e.KeyChar) && !char.IsDigit(e.KeyChar) || char.IsWhiteSpace(e.KeyChar) || char.IsDigit('7') || char.IsDigit('8'))

和一个孩子div：

background-image: url('img.jpg'); background-color: rgba(0,0,0,0.4);

如何让儿童DIV显示父母背景图像的一部分而没有黑色透明度？

＆＃13;

width: 400px;
height: 400px;

＆＃13;

.parent {
  width: 500px;
  height: 500px;
  background: url('http://i.imgur.com/Y6a49hy.png');
}

.child {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
}

.non-shadowed-div {
  width: 300px;
  height: 300px;
}

＆＃13;

Answer 1

一种选择是使用box-shadow：

.outer {
  background: url('https://fillmurray.com/400/200') no-repeat center;
  height: 600px;
  width: 100%;
  background-size: cover;
  position: relative;
  overflow: hidden
}

.inner {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  background: transparent;
  box-shadow: 0 0 0 1000px rgba(0,0,0,.5); 
}

<div class="outer">
    <div class="inner">lalalalala</div>
</div>

Answer 2

框阴影答案的替代方法是向内部div添加边框

div {
  width: 500px;
  height: 500px;
  box-sizing:border-box;
}
.parent {
  background: url('http://i.imgur.com/Y6a49hy.png');

}
.non-shadowed-div {
  border: 100px solid rgba(0,0,0,0.7);  /* 100px border on each side leaves you with a 300px box in the middle */
}

<div class="parent">
  <div class="non-shadowed-div">
    This div shouldn't be shadowed like the rest of the square
  </div>
</div>

Answer 3

您可以模拟如下所示。家长只有背景图片。孩子有一个很大的边框模拟图像的叠加。

＆＃13;

.parent {
  width: 200px;
  height: 200px;
  background: url("http://lorempixel.com/200/200");
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.child {
  min-width: 100px;
  min-height: 100px;
  background-color: transparent;
  border: solid rgba(0, 0, 0, 0.8) 10em;
}

＆＃13;

<div class="parent">
  <div class="child">
  </div>
</div>

＆＃13;

如何让孩子DIV从图像上具有40％透明色的父级中删除颜色透明度？

3 个答案: