是否有可能让一个元素透明并透过他的父不透明背景看到

Question

您好，我正在设计一个表单 (HTML / CSS / JS)，当用户想要订阅或登录时，它会弹出内容。整个表单背景是纯色不透明，但我希望输入具有透明背景，以便我们可以通过它看到表单背后的内容。将输入设置为透明没有任何问题，但我不知道如何使它们 "pass through" 它们的父背景颜色。我开始认为只有 CSS 是不可能的。我可以共享代码，但这更像是一个通用问题。谢谢

Answer 1

看看这个解决方案，https://jsfiddle.net/bnnp2pvj/1/

var color = $('.container').css('background-color');
color = color.replace(')', ', 0.2)').replace('rgb', 'rgba');
$('.background-match').css({"background-color":color});

Answer 2

可以，可以使用 mask

Support is not perfect，但回退只是没有透明度，所以它很好地降级了。这也会随着时间的推移而改善。

这将允许元素后面的任何东西发光，平面颜色、纹理、渐变、多个元素、图像甚至视频。

此外，它将样式保留在它所属的 css（和图像）中。

我做了一个 JSFiddle to demonstrate - 真的很简单：

<div class="background">
    <div class='masked'>
    </div>
</div>

标记在那里，背景包含要屏蔽的元素。蒙版本身是由任何透明度级别（包括完全透明）的黑色区域组成的图像。这是：

两个字母框的形状是透明位，背景从这里一直延伸到前景。底部的栏是 50% 透明的，用于演示如何使用 alpha 值。

css 在这里：

.background {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
    width: 250px;
    height: 250px;
    float:left;
}
.masked {
    background: #fff;
    width: 200px;
    margin: 25px;
    height: 200px;
    background-color: #4f6;
    -webkit-mask-image: url(http://Whosebugimages.excitedstatelaboratory.com/mask-example-image-2.png);
}

您可以看到一些特定于定位和大小的演示，但重要的是 -webkit-mask-image，它像背景图像一样工作，可以找到所需的 png。

我们可以 break the mask image 使它属性无效，这模拟了如果浏览器不理解属性.

会发生什么

一旦最后一点，你放入槽中的任何东西都必须将它自己的背景设置为透明，以便通过槽的东西可见，但是 this is easy.

Answer 3

一个完全不同的解决方案是使用 <svg>，甚至是 .png（尽管那将是一个额外的 http 请求）。

<div class='container is--transparent'>
    <svg>
        # I am the same size as the background and have transparent parts where required
        # Indeed, I could be a div, with a .png background, if you needed to support older browsers
    </svg>
    <input class='input-one' />
    <input class='input-two' />
</div>

然后用css设置：

position: absolute; 在后台的所有内容上 div
svg 为 top: 0; left: 0; 因此它完全覆盖了容器
要放置在 SVG 透明部分上的输入
输入的背景透明

这样，输入框下的所有内容都将是透明的，而且无论背景是什么，都会发光。

对svgs的支持也很好，你必须回到IE8才有问题。

Answer 4

您可以通过使用更多元素和一点创意让您的输入看起来像是一个切口来作弊...

Working Example

$('.wrap').draggable();// demo only, used to show off cutout effect. Not necessary

.wrap {
    position:absolute;
}
.top, .bottom {
    background:grey;
}
input, .top, .bottom {
    width: 100%;
    border: 30px solid grey;
}
input {
    background: transparent;
    color: red;
    border: 29px solid grey;
    outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
    <div class="top">This may be cheating, but it works...</div>
    <input type="text" placeholder="testing"/>
    <div class="bottom"></div>
</div>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead. Lucio fulci tremor est dark vivos magna. Expansis creepy arm yof darkness ulnis witchcraft missing carnem armis Kirkman Moore and Adlard caeruleum in locis. Romero morbo Congress amarus in auras. Nihil horum sagittis tincidunt, zombie slack-jawed gelida survival portenta. The unleashed virus est, et iam zombie mortui ambulabunt super terram. Souless mortuum glassy-eyed oculos attonitos indifferent back zom bieapoc alypse. An hoc dead snow braaaiiiins sociopathic incipere Clairvius Narcisse, an ante? Is bello mundi z?</p>

是否有可能让一个元素透明并透过他的父不透明背景看到

Is it possible to have a element transparent and see through his parent opaque background

html

css

transparency

background