¿Cómo puedo conseguir la siguiente marca de agua de texto («howbloggerz») con css/html?

Marca de agua de texto repetido en diagonal css/html

  • Yo no creo que esto se puede hacer con HTML/CSS, solo si se requiere modificar la imagen real (de lo contrario, los espectadores pueden guardar la imagen sin marca de agua). Es un servidor de cara una posible solución?
  • No es necesario modificar la imagen real. Los espectadores están autorizados a guardarlo sin marca de agua, en este caso 🙂
  • Esto es exactamente lo que yo necesitaba para hacer evidente una edición de copia se muestra en lugar de la oficial.

4 Comentarios

  1. 6

    Establecer el tamaño de su contenedor y flotar su texto utilizando posicionamiento absoluto, mientras que la transformación de su texto con girar.

    CSS:

    #watermark {
      height: 450px;
      width: 600px;
      position: relative;
      overflow: hidden;
    }
    #watermark img {
      max-width: 100%;
    }
    #watermark p {
      position: absolute;
      top: 0;
      left: 0;
      color: #fff;
      font-size: 18px;
      pointer-events: none;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
    }

    HTML:

    <div id="watermark">
      <img src="http://www.topchinatravel.com/pic/city/dalian/attraction/people-square-1.jpg">
      <p>This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark.</p>
    </div>

    Nota: Para repetir el texto, me permito sugerir el uso de JavaScript o jQuery.

    • La marca de agua de texto puede ser seleccionada, es posible que desee para arreglar eso con puntero-eventos: none;
    • Gracias. He actualizado el CSS.
  2. 20

    Esto es bastante similar a la Daerik la respuesta, pero quería evitar el uso de un elemento adicional, y automatizar el texto de la marca de la generación.

    JS:

    Array.from(document.querySelectorAll('.watermarked')).forEach(function(el) {
      el.dataset.watermark = (el.dataset.watermark + ' ').repeat(300);
    });

    CSS:

    .watermarked {
      position: relative;
      overflow: hidden;
    }
    
    .watermarked img {
      width: 100%;
    }
    
    .watermarked::before {
      position: absolute;
      top: -75%;
      left: -75%;
      
      display: block;
      width: 150%;
      height: 150%;
      
      transform: rotate(-45deg);
      content: attr(data-watermark);
      
      opacity: 0.7;
      line-height: 3em;
      letter-spacing: 2px;
      color: #fff;
    }

    HTML:

    <div class="watermarked" data-watermark="howbloggerz">
      <img src="http://www.w3schools.com/css/img_fjords.jpg">
    </div>

    • Gracias, esto puede ser incluso más fácil 🙂
    • Agradable y limpio y funciona en muchos y diferentes elementos 🙂
    • Array.from() y String.prototype.repeat() se introdujeron en el mismo ECMAScript 2015 estándar (ES6, o ECMA-262), así que soy curioso en cuanto a por qué dudan en utilizar uno y el otro no? De lo contrario, impresionante respuesta.
    • buena pregunta! Este fue un descuido de mi parte. Me había acostumbrado tanto a tener Array.from polyfilled, que completamente se deslizó en mi mente que el apoyo era esencialmente idéntico. He actualizado el post para uso String.prototype.repeat.
    • Las grandes obras. A pesar de que yo tenía que evitar el uso de cualquier JavaScript desde la OP fue pidiendo CSS/HTML. Por eso he añadido mi sugerencia para el uso de JavaScript o jQuery.
  3. 3

    Ahora estoy usando svg como una imagen de fondo. Llanura CSS:

    CSS:

    body {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgb(245,45,45)' font-size='20'>watermark</text></svg>");
    }

    HTML:

    <body style="width:100%;height:100%"></body>

    Javascript para establecer el fondo:

    JS:

    function watermark(text) {
      var body = document.getElementsByTagName('body')[0];
      var bg = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'>" +
        "<text transform='translate(20, 100) rotate(-45)' fill='rgb(245,45,45)' font-size='20' >" + text + "</text></svg>\")";
      body.style.backgroundImage = bg
    }
    
    //for this test
    var input = document.getElementById('a');
    watermark(input.value);
    input.addEventListener('input', function(evt) {
      watermark(this.value);
    });

    HTML:

    <body style="width:100%;height:100%">
      <input id="a" value="change me" />
    </body>

  4. 0
    CSS:-
    .watermarked::before {
        position: fixed;
        top: -75%;
        left: -75%;
    
        display: block;
        width: 300%;
        height: 300%;
    
        transform: rotate(-45deg);
        content: attr(data-watermark);
    
        font-size: 30px;
        opacity: 0.15;
        line-height: 4em;
        letter-spacing: 2px;
        color: #ff0523;
        z-index:-1;
    }
    
    HTML:-
    <div class="watermarked" data-watermark="Watermark.."></div>
    
    SCRIPT:-
    
    <script>        
    Array.from(document.querySelectorAll('.watermarked')).forEach(function(el) {
            el.dataset.watermark = (el.dataset.watermark + ' ').repeat(10000);
        });
    </script>

    posición de la marca debe ser fijo y pantalla con & altura debe
    ser el tamaño de tu pantalla. A continuación, marca de agua será impreso en su totalidad
    informe o algo.

Dejar respuesta

Please enter your comment!
Please enter your name here