Problems with CSS opacity

Question

I’m trying to put an image so it looks like this:

but that’s not what happens, but watch my page;

<div class="container-fluid">
    <div id="conteudo">
        <div id="apresentacao">
            <div id="frase1">
                Bem vindo ao Agendador de salas
            </div>
        </div>

        <div id="apresentacao2">
            Fique atento as regras para agenda as salas para reunião.
        </div>
    </div>
</div>

Check out my CSS;

#frase1{
    position: relative;
    top: 0px;
    width: 300px;
    height: 20px;
    border: 2px solid #fff;
    background-color:#000000; 

}

The background was supposed to be black. How do I do what I need?

I tried to make the suggested changes, but I was unsuccessful;

Answer 1

You can do it this way:

#conteudo{
        background:url(http://www.semprefamilia.com.br/wp-content/uploads/2015/06/SJC_prefeitura-1180x472.jpg) no-repeat;
        width:100%;
        min-height:400px;
    }
    #apresentacao{
        background:rgba(0,0,0,0.40);
        padding:10px;
        position: relative;
        width:80%;
    }
    
    #apresentacao .frases {
    position: relative;
    left: 0;
    color:#FFF;
    background: #000;
    padding:5px;
    border: 1px solid #FFF;
    
    }

<div class="container-fluid">
    <div id="conteudo">
        <div id="apresentacao">
            <h1 class="frases" >Bem vindo ao Agendador de salas</h1>
            <h2 class="frases">Fique atento as regras para agenda as
                salas para reunião.
            </h2>
        </div>
    </div>
</div>

Note that I put a phrase class in the text for easy formatting, now you can attack the font size directly in element H1 and H2. as an example:

#apresentacao h1{
   font-size:1em; 
   font-family: Arial,
}

#apresentacao h2{
   font-size:0.75em; 
   font-family: Arial,
}

Answer 2

We can use css3, where the 0.5 below represents the color transparency.

#frase1{
    position: relative;
    top: 0px;
    width: 300px;
    height: 20px;
    border: 2px solid #fff;
    background-color: RGBA(0,0,0,0.5); 

}

<div class="container-fluid">
    <div id="conteudo">
        <div id="apresentacao">
            <div id="frase1">
                Bem vindo ao Agendador de salas
            </div>
        </div>

        <div id="apresentacao2">
            Fique atento as regras para agenda as salas para reunião.
        </div>
    </div>
</div>

Answer 3

I believe your question is unrelated to opacity, since you cite the term only in the title. I assume, too, that it is about the stylization of the text. So there goes my answer based on these premises:

Avoid using the same tag For size and text style definitions, this has unwanted effects. If you want to style the text only (i.e., change the background color and the color of the text itself), I suggest using the <span>. Behold:

#frase1{
    position: relative;
    top: 0px;
    width: 300px;
    height: 20px;
    border: 2px solid #fff;
}

#frase1 span{
    background-color:#000000; 
    color: white;
}

<div class="container-fluid">
    <div id="conteudo">
        <div id="apresentacao">
            <div id="frase1">
              <span>Bem vindo ao Agendador de salas</span>
            </div>
        </div>

        <div id="apresentacao2">
            <span>Fique atento as regras para agenda as salas para reunião.</span>
        </div>
    </div>
</div>

In the CSS i have separated what is related to the positioning of what is related to the stylization of the text. So, #frase1 is responsible for positioning your sentence wherever you want, while #frase1 span contains the rules of color and the like. See also that I added the white color to achieve the desired effect.