Creating a Watermark as an Overlay with HTML CSS-CodePudding

I want to have a text as a watermark (centered and on top of the screen) but when I use the z-index property, I lose the ability to interact with any other elements present behind it. Help, please!

Code-

.watermark-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
}

 <p >A Web Dev Course Project</p>

CodePudding user response：

You can stop the watermark picking up clicks etc by setting pointer-events on it to none.

Here's an example (the watermark element has a slight background to prove it is covering the button):

* {
  margin: 0;
}

.watermark-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

<p >A Web Dev Course Project</p>
<button onclick="alert('I saw your click');">Click me</button>

CodePudding user response：

A way of doing this is by not letting this watermark occupy the entire width and height of the screen. To do this, remove the height and width properties and add the following code to it which doesn't occupy the entire screen. I set the background property so that it can be seen that the element only occupies just the text part of it.

.watermark-text {
  position: fixed;
  z-index: 1;
  background: pink;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<p >A Web Dev Course Project</p>

CodePudding user response：

If your watermark has to appear on a text content you can use negative or z-index less than that of the element. If your watermark has to appear in top of a block content you have to use z- index higher than that of the element. In that case you can add

pointer-events: none;

to your css or the following options.

user-select: none; /* Non-prefixed version for chorme, opera and*/
-ms-user-select: none; /* Internet Explorer, Edge */
-moz-user-select: none; /* Firefox */
-khtml-user-select: none; /* Konqueror HTML */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */

and also add opacity of your choice if needed.

opacity: 0.2; /*(0-1)/*