是否可以使元素透明並透視其父不透明背景

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

一個完全不同的解決方案是使用<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設置：

1. position: absolute; 在背景div中的所有內容
2. svg是top: 0; left: 0; 所以它完全覆蓋了容器
3. 輸入定位在SVG中的透明部分上
4. 投入的背景是透明的

這樣，輸入下的所有內容都將是透明的，無論背景如何都會閃耀。

對svgs的支持也很出色，你必須回到IE8才會出現問題。

Answer 3

是的你可以，你可以使用mask

支持並不完美 ，但后備只是沒有透明度，所以它很好地降級。 這也將隨着時間的推移而改善。

這將允許元素背后的任何東西透過，平面顏色，紋理，漸變，多個元素，圖像甚至視頻。

另外，它將風格保留在css（和圖像）所屬的位置。

我做了一個JSFiddle來演示 - 它非常簡單：

<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://stackoverflowimages.excitedstatelaboratory.com/mask-example-image-2.png);
}

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

我們可以通過使其屬性無效來破壞掩碼圖像 ，這模擬了如果瀏覽器不理解該屬性會發生什么。

最后一點，你放入插槽的任何東西都必須將它自己的背景設置為透明，以便通過插槽的東西可見，但這很容易 。

Answer 4

看看這個解決方案， 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});