как мы можем добавить водяной знак в существующий html-файл

#html #css

#HTML #css

Вопрос:

Есть ли какой-либо способ добавить водяной знак для существующего html-файла.. У меня есть приведенный ниже код в html-файле

 <html>

<body>

  <h1>The position property</h1>

  <h2>position: static;</h2>
  <p>The Parent1 element has position: static, and will remain in the natural flow of the page. It will NOT act as anchor point for the absolutely positioned Child1 element:</p>

  <h2>position: relative;</h2>
  <p>The Parent2 element has position: relative, and will remain in the natural flow of the page. It will also act as anchor point for the absolutely positioned Child2 element:</p>

</body>

</html>

Когда я попытался добавить водяной знак, используя приведенный ниже код, водяной знак добавляется в верхней части html-файла или внизу, но он не применяется в качестве серверной части содержимого html-файла, могу ли я как-нибудь попробовать, пожалуйста

 <html>
<style type="text/css">
  #watermark {
    color: #d0d0d0;
    font-size: 100pt;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    position: center;
    width: 100%;
    height: 100%;
    margin: 100;
    z-index: -2;
    left: -200px;
    top: -200px;
  }
</style>
<div id="watermark">
  <p>Insurance</p>
</div>

</html>

1. «бэкэнд контента» — что такое «бэкэнд»? Вы имеете в виду, что это не стоит за другим контентом? «Серверная часть» почти всегда означает серверную часть веб-сайта / веб-сервера.

2. @GalaxyCat105 .. Я имею в виду обратную сторону HTML-файла

Ответ №1:

Позиция: абсолютная

 #watermark {
  color: #d0d0d0;
  font-size: 100pt;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  position: absolute;
  top:-175px;
  left: 100px;
  width: 100%;
  height: 100%;
  margin: 100;
  z-index: -2;


}

 <html>

<body>
  <div>

    <h1>The position property</h1>

    <h2>position: static;</h2>
    <p>The Parent1 element has position: static, and will remain in the natural flow of the page. It will NOT act as anchor point for the absolutely positioned Child1 element:</p>

    <h2>position: relative;</h2>
    <p>The Parent2 element has position: relative, and will remain in the natural flow of the page. It will also act as anchor point for the absolutely positioned Child2 element:</p>

    <div id="watermark">
      <p>Insurance</p>
    </div>

  </div>
</body>

</html>

1. Я думаю, вам также нужно подчеркнуть, что в принципе, есть что-то position другое, кроме static . position: center также не является допустимым правилом.

2. Было бы еще лучше, если бы вы установили user-select значение none .

3. @mplunghan .. У меня есть одно сомнение: если у меня есть несколько тегов открытия и закрытия html, можем ли мы применить водяной знак в резервной копии?

Ответ №2:

В принципе, вы должны сделать водяной знак div абсолютным и использовать flex для центрирования текста как по горизонтали, так и по вертикали.

Попробуйте эти настройки:

 <html>
<style type="text/css">
  #watermark {
    position: absolute;
    top:0;bottom:0;left:0;right:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    z-index:-9;
  }
  #watermark > div {
   color: #d0d0d0;
   font-size: 100pt;
   opacity: .5;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
  }
</style>
<div id="watermark">
<div>Insurance</div>
</div>
<div>Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content Page content </div>
</html>

1. @ У меня есть одно сомнение, если у меня есть несколько тегов открытия и закрытия html, можем ли мы применить водяной знак в резервной копии?

2. Да, просто используйте class="watermark" вместо id, и вы можете использовать его несколько раз.