Skip to main content
4 de 5
varios fondos para ver la transparencia
alo Malbarez
  • 9.7k
  • 3
  • 12
  • 29

Pues puedes establecer el color de fondo con opacidad de enviando su valor en distintas formas:

rgba

.a{
    color: black;
    background-color: rgba(0, 255, 0, 0.2); // un verde con opacidad
    font-size: 150%;
    font-family: Oswald;
}

hsla

.a{
    color: black;
    background-color: hsla(120, 100%, 50%, 0.3); // un verde con opacidad
    font-size: 150%;
    font-family: Oswald;
}

Ejemplo:

#rgba {
  color: black;
  background-color: rgba(0, 255, 0, 0.1);
  font-size: 150%;
  font-family: Oswald;
  padding: 15px;
  text-decoration: none;
}

#hsla {
  color: black;
  background-color: hsla(120, 100%, 50%, 0.1);
  font-size: 150%;
  font-family: Oswald;
  padding: 15px;
  text-decoration: none;
}


/* estilos de fondo para ver la transparencia */

h1 {
  font-size: 12px;
  margin: 5px 0;
  padding: 0;
  text-shadow: 1px 1px 1px #fff;
}

div {
  border: 1px solid transparent;
  padding: 10px;
  margin: 10px;
}

#fondoB {
  background: #fff;
}

#fondoI {
  background-image: url(https://picsum.photos/g/600?random);
  background-size: cover;
  background-position: center;
}

#fondoG {
  background: linear-gradient(to right, #fff 0%, #fff 10%, #ccc 10%, #333 20%, #fff 20%, #fff 100%);
}
<div id="fondoB">
  <h1>fondo Blanco</h1>
  <h5>Verde con opacidad al 1% usando rgba</h5>
  <a id="rgba" class="btn a" href="menu">MENU</a>

  <h5>Verde con opacidad al 1% usando hsla</h5>
  <a id="hsla" class="btn a" href="menu">MENU</a>
</div>

<div id="fondoG">
  <h1>fondo gradient</h1>
  <h5>Verde con opacidad al 1% usando rgba</h5>
  <a id="rgba" class="btn a" href="menu">MENU</a>

  <h5>Verde con opacidad al 1% usando hsla</h5>
  <a id="hsla" class="btn a" href="menu">MENU</a>
</div>

<div id="fondoI">
  <h1>fondo imagen</h1>
  <h5>Verde con opacidad al 1% usando rgba</h5>
  <a id="rgba" class="btn a" href="menu">MENU</a>

  <h5>Verde con opacidad al 1% usando hsla</h5>
  <a id="hsla" class="btn a" href="menu">MENU</a>
</div>


Referencia sobre colores CSS

Levi Arista
  • 2.8k
  • 2
  • 14
  • 27