是否可以使元素透明并透视其父不透明背景

Question

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

Answer 1

您可以通过使用更多元素和一点创造力使您的输入看起来像一个剪影作弊...

工作实例

$('.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>

Answer 2

一个完全不同的解决方案是使用 a <svg>，甚至 a .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设置：

1. position: absolute;背景 div 内的所有内容
2. svg 是这样top: 0; left: 0;的，这样它就可以完全覆盖容器
3. 将输入放置在 SVG 中的透明部分上
4. 输入的背景是透明的

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

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