Skip to content

Latest commit

 

History

History
58 lines (41 loc) · 1.98 KB

README.md

File metadata and controls

58 lines (41 loc) · 1.98 KB
Raw

demo

https://liugq5713.github.io/watermarkToDiv/

Features

  1. Using a text to stamp
  2. you can rotate the stamp in any rotate
  3. add watermark to any html elements,so you can add different watermarks in a web page

Defact

  1. watermark will set the position of the element for relative which contain the watermark
  2. when you set abnormal options of the wartemark like font:'226px serif',rotate:13/24*Math.PI.the watermark will only show a part of it and you could fix the issue by set yOffset which control the start point of the text.

Download

Git

git@github.com:Liugq5713/watermarkToDiv.git

npm

npm install --dev-save watermark-div

How to use

Usage

import Watermark from 'watermark-div'

const OPTIONS = { text: 'Hello World' }
const watermark = new Watermark(OPTIONS)
// contain_el is the container which you want to add watermark
watermark.embed(contain_el)

Options

Name Type Default Description
text String 'Hello world' the text as watermark
font String '16px serif' Font size and the style of text
opacity Number 0.6 the opactity of watermark
density number 1 the density of watermark
rotate rad -1 / 6 * Math.PI the rotate of watermark
z_index number 2018 the element's z-index which has watermark
color String 'rgba(151,168,190,0.6)' Text color, you can use HEX or RGBA color codes
yOffset number 3 control the start point of text