Возможно ли иметь элемент прозрачным и видеть через его родительский непрозрачный фон?

Question

Привет, я разрабатываю форму (HTML/CSS/JS), которая поп-музыки по содержимому, когда пользователь хочет подписаться или войти в систему. Весь фон формы является сплошным непрозрачным цветом, но я хочу, чтобы входные данные имели прозрачный фон, чтобы мы могли видеть содержимое за его формой. У меня нет проблем с установкой прозрачных входов, но я не знаю, как я могу заставить их «пройти» их родительский цвет фона. Я начинаю думать, что это невозможно с помощью только CSS. Я могу поделиться кодом, но это больше похоже на общий вопрос. Благодаря

Answer 1

Совершенно другое решение было бы использовать <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 2

Посмотрите на это решение, 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 3

Да, вы можете, вы можете использовать mask

Support is not perfect, но запасной вариант просто нет прозрачности, поэтому он деградирует мило. Это также со временем улучшится.

Это позволит все, что находится за элементом, пролить свет, плоский цвет, текстуру, градиент, несколько элементов, изображения или даже видео.

Плюс, он сохраняет стиль в css (и изображениях), где он принадлежит.

Я сделал JSFiddle to demonstrate - это довольно просто на самом деле:

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

Разметка есть, фон содержит элемент, который будет замаскирован. Сама маска представляет собой изображение из черных областей любого уровня прозрачности (в том числе полностью прозрачное). Вот оно:

Два письма коробка формы являются прозрачными битами, которые где фон прожигает на первый план. Панель внизу прозрачна на 50% и служит для демонстрации того, как можно использовать значения альфа.

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.

Мы можем указать break the mask image, сделав его недействительным, что имитирует, что произойдет, если браузер не понял этого свойства.

Как только конечный пункт, все, что вы положили в слоты, должно было бы иметь свой собственный фон, установленный на прозрачный, чтобы материал, проходящий через слоты, был видимым, но this is easy.

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>