Problems with CSS opacity

Question

Problems with CSS opacity

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (0 votes)

4

I'm trying to put an image so that it looks similar to this:

Butitisnotwhathappens,butnoticehowmypageis;

<divclass="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>

See how my CSS is;

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

}

It was for the background to have gone black. How do I do what I need?

I tried to make the suggested changes, but I was not successful;

css

asked by anonymous 01.12.2015 / 15:46

3 answers

1

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

#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>

01.12.2015 / 16:02

0

I think your question is unrelated to opacity, since you quote the term only in the title. I also assume that it is about the stylization of the text. So here's my answer based on this premise:

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

#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>

No CSS I have separated what is related to the positioning of what is related to the stylization of the text. Thus, #frase1 is responsible for positioning your phrase wherever you want, while #frase1 span contains the color rules and the like. Also, I added the white color to achieve the desired effect.

01.12.2015 / 16:04

Is it possible to create a site without a markup language? What are the advantages of angled typing?

score 4 · Accepted Answer

You can do this as follows:

#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 ease of formatting, now you can attack the direct font size in element h1 and h2. such as:

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

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