CSS – Efecto marca de agua

Buenas amigos, hoy os traigo algo que seguramente os resulte muy útil.
Mediante unos estilos CSS vamos a conseguir un efecto de marca de agua, esto no es seguro, pero si muy disuasorio, ya que si alguien quiere robarnos la imagen, va a ver nuestro logo, o la imagen que definamos sobre la imagen en cuestión y en mas del 90% de los casos no intentara cogerla.

Os explico, para conseguirlo necesitamos un Div que lo contenga todo y 2 imagenes, una que se va a utilizar como marca de agua y la otra que es la que mostraremos, algo similar a esto

<div class=»marca-de-agua»>
<img alt=»» src=»URL-IMAGEN» /></div>

 y los siguientes estilos CSS:

.marca-de-agua {
    background-image: url(«../img/rogamaLogo.png»);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: auto;
    margin: auto;
}
.marca-de-agua img {
    padding: 0;
    width: 100%;
    height: auto;
    opacity: 0.7;
}

El código LESS:

@import ‘variables.less’;
.marca-de-agua {
   background-image: url(«@{ruta-img}@{img-marca-agua}»);
   background-repeat: no-repeat;
   background-position: center;
   width: 100%;
   height: auto;
   margin: auto;
   img{
        padding:0;
        width:100%;
        height: auto;
        opacity: @opacity-img;
        &:hover{
            opacity: 1;
            transition: 1s;
        }
   }
}
//**************variables.less**********//
@opacity-img: .7;
@ruta-img: ‘../img/’;
@img-marca-agua: ‘rogamaLogo.png’;


quedaría algo así:

todo Android Gratis

Os dejo todo el código en el siguiente repositorio
https://github.com/rogama/ejemplos-HTML5-CSS3

2 comentarios

Los comentarios están cerrados.