Texto da marca de água repetido diagonalmente css / html
3
Author: Captain Obvious, 2016-11-28
3 answers
Define o tamanho do seu contentor e flutua o seu texto com posicionamento absoluto enquanto transforma o seu texto com rotação.
#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);
}
<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 o texto, sugiro usar JavaScript ou jQuery.
3
Author: Daerik, 2017-10-13 13:41:11
Isto é muito semelhante à resposta do Daerik, mas eu queria evitar usar um elemento extra, e automatizar a geração de texto da marca d'água.
Array.from(document.querySelectorAll('.watermarked')).forEach(function(el) {
el.dataset.watermark = (el.dataset.watermark + ' ').repeat(300);
});
.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;
}
<div class="watermarked" data-watermark="howbloggerz">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>
11
Author: Gerrit0, 2017-08-13 00:57:08
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>
A posição da marca de água deve ser fixa e a visualização com & altura deve sê do teu tamanho. Então a marca de água será impressa em todo o seu relatório ou algo assim.
0
Author: Hashan, 2018-01-17 06:21:51