Как сделать прозрачность через блок?

Question

[Евгений Литвинов]

Начинаю практиковаться в дизайне.
У меня есть фоновый div с картинкой, и есть блок слева, на котором текст нужно сделать прозрачным настолько, что бы был виден фон.

css

.first{
	width: 100%;
	max-width: 1280px;
	height: 720px;
	background-color: #6af;
	opacity: 95%;
	position: relative;
		.notbutton{
			width: 33px;
			height: 720px;
			background-color: #6af;
			border-right: 1px solid #ddd;
			border-left: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			color: rgba(255, 255, 255, 0);
			display: block;
			text-align: center;
			font-size: 22px;
			line-height: 41px;
			font-weight: 350;
			font-family: "TECHNIC";
			position: absolute;
			text-transform: uppercase;
			text-shadow: 1px 1px 4px #66f;
		}
}

Answer 1

[Ankhena]

Answer 2

[Андрей Федоров]

https://codepen.io/aliencash/pen/jXZaaj
Сами разберетесь?

Answer 3

[Steppp]

opacity: 0.5;

0 - полностью прозрачный
1 - полностью видимый!
0.5 = 50% прозрачности

Comments

[Steppp]

дополню!
Opacity делает прозрачными и вложенные элементы! допустим задал диву Opacity: .5 И все в нутри дива тоже становится прозрачным!

Если Тебе надо только синий фон сделать прозрачным, сделай цвет в background: rgba(20, 20, 20, 0.5)
или #20202080 - 80 это прозрачность 50% )
Но лучше rgba

[Ankhena]

Steppp,

или #20202050 - 50 это прозрачность 50%

Вообще-то 50 в 16-ричной системе это совсем не 50

[Steppp]

Ankhena, Класс) А я всегда думал что 50%)))

[Евгений Литвинов]

Steppp, мне нужно сделать именно текст прозрачным через div с синим фоном. Тоесть что бы я через контуры символов видел саму картинку (растянута под синий div)

[Steppp]

Евгений Литвинов, Хммм! Тут мои полномочия все))) вообще
color: transparent; прозрачный!

Я бы попробовал сделать, текст SPRUC с синим фоном, с color: transparent; и растянул бы паддингами!

[Steppp]

Вот тут пример