FUNDOS CSS

 FUNDOS CSS

Você vai aprender as seguintes propriedades de fundo do css.

Ø  background-color

Ø  background-image

Ø  background-repeat

Ø  background-attachment

Ø  background-position

Ø  background (propriedade abreviada)

COR DO FUNDO DO CSS

backgrond-color é a propriedade do elemento cor do fundo.

<!DOCTYPE html>

<html>

<head>

<style>

body {

  background-color:lightblue;

}

</style>

</head>

<body>

<h1>Cor do fundo</h1>

<p>Primeira página com cor azul claro</p>

</body>

</html>

OUTROS ELEMENTOS

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

  background-color: green;

}

 

div {

  background-color: lightblue;

}

 

p {

  background-color: yellow;

}

</style>

</head>

<body>

<h1>Usando backgrond-color</h1>

<div>

O texto esta dentro de uma div

<p>Cor do fundo do backgrond-color e amarelo</p>

com elemento div.

</div>

</body>

</html>

OPACIDADE / TRANSPARÊNCIA

Opacity é a propriedade que vai especificar a opacidade /transparência do elemento.

<!DOCTYPE html>

<html>

<head>

<style>

div {

  background-color:lightblue;

}

 

div.primeira {

  opacity: 0.2;

}

 

div.segunda {

  opacity: 0.4;

}

 

div.terceira {

  opacity: 0.6;

}

</style>

</head>

<body>

<h1>Transparência dos boxes</h1>

<p>Usando a propriedade  opacity para adicionar transparência  no brackgrond dos elementos.</p>

<div class="primeira">

  <h1>opacity 0.2</h1>

</div>

<div class="segunda">

  <h1>opacity 0.4</h1>

</div>

<div class="terceira">

  <h1>opacity 0.6</h1>

</div>

<div>

  <h1>opacity 1 (neutro)</h1>

</div>

</body>

</html>

Transparência usando RGBA

<!DOCTYPE html>

<html>

<head>

<style>

div {

  background: rgb(0, 128, 0);

}

div.primeira {

  background: rgba(0, 128, 0, 0.2);

}

div.segunda {

  background: rgba(0, 128, 0, 0.4);

}

div.terceira {

  background: rgba(0, 128, 0, 0.6);

}

</style>

</head>

<body>

<h1>Transparência  boxes 2</h1>

<p>Resultado da opacidade</p>

<div style="opacity:0.2;">

  <h1>20% opacity</h1>

</div>

<div style="opacity:0.4;">

  <h1>40% opacity</h1>

</div>

<div style="opacity:0.6;">

  <h1>60% opacity</h1>

</div>

<div>

  <h1>opacity 1</h1>

</div>

<p>Resultado em rgba():</p>

<div class="primeira">

  <h1>20% opacity</h1>

</div>

<div class="segunda">

  <h1>40% opacity</h1>

</div>

<div class="terceira">

  <h1>60% opacity</h1>

</div>

<div>

  <h1>default</h1>

</div>

</body>

</html>