Hola, en este nuevo tips para CSS, te enseñare como hacer una “Marca de Agua” que se sobre pondrá en cualquier elemento HTML del documento. La técnica es muy sencilla, veamos.

body:after {
  content: "©"; 
  font-size: 15em;  
  color: rgba(52, 166, 214, 0.4);
  z-index: 9999;
 
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
    
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

Simplemente utilizamos los Pseudo-elementos para insertar la marca, la posicionamos en el centro del documento gracias a las propiedades de flexbox, le damos un color por medio del método RGBA para aplicar colores y asi darle opacidad al texto, le damos un z-index alto para que este por encima de los demas elementos y desactivamos por css los eventos de puntero  que pueda realizar el usuario.

See the Pen Marca de agua con CSS by frontend (@tutosytips) on CodePen
20550

Y listo, en este caso lo aplicamos al body que sobre pondrá todo, aunque lo podemos aplicar a cualquier otro elemento.

avatar