Dúvida com BG para texto transparente

[HugoSalema 0]

Olá amigos, sou beeem iniciante no mundo do HTML/CSS e estou desenvolvendo meu primeiro site, tenho uma dúvida que pode ser bem simples:

 

Como fazer isso:

http://prntscr.com/ekygx5

 

Se transformar nisso?

http://prntscr.com/ekyh3r

 

Basicamente queria fazer uma faixa transparente atrás do texto, mas isso foi o mais perto que eu conseguir chegar.

 

Meu código até então:

<section class="introducao">
      <div class="container">
            <h1>CUPCAKES  DE ENLOUQUECER</h1>
            </div>
     <div class="fundo"></div>
 </section>

 

E o CSS:

 

.introducao h1 {
    font-size: 80px;
    line-height: 60px;
    color: white;
    text-transform: uppercase;
    margin-top: 180px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    background-color: #e77bae;

 

[KhaosDoctor 242]

Usa o RGBA:

 

Primeiro vamos ter que descobrir qual é o equivalente RGB do seu Hexadecimal aqui background-color: #e77bae;

 

Vou usar o site https://www.webpagefx.com/web-design/hex-to-rgb/ que me retorna rgb(231,123,174). Então podemos colocar o canal alpha (transparencia) assim: background-color: rgba(231,123,174,0.7) < Note que o 0.7 significa 70% de transparencia (vai de 0 a 1). Veja se funciona

 

 

 

 

[HugoSalema 0]

Entendi! E me tira mais uma dúvida, como eu consigo fazer a caixa rosa preencher de ponta a ponta? Sendo que ela é o fundo do texto?  Algo como criar uma caixa nova e por por trás desse texto e por cima da foto de background.