Transparency in the background but not in the text

Question

Transparency in the background but not in the text

Navigation

#1 by (3 votes)

2

This is my code:

.a {
  /*BOTONES NORMALES*/
  color: black;
  background-color: white;
  font-size: 150%;
  font-family: Oswald;
  opacity: 0.3;
  filter: alpha(opacity=30);
}

<a class="btn a" href="menu">MENU</a>

html css

asked by GERMAN SOSA 03.08.2018 в 21:43

source

1 answer

How to assign a HotKey with JQuery to a button How can I replace $ _SESSION with a prepared query?

score 3 · Answer 1

Well, you can set the background color with opacity by sending its value in different ways:

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;
}

Example:

#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 {
  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">
  <h3>Fondo Blanco</h3>
  <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">
  <h3>Fondo Gradient</h3>
  <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">
  <h3>Fondo con imagen</h3>
  <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>

CSS color reference