【问题标题】:Creating watermark using html and css使用 html 和 css 创建水印
【发布时间】:2014-02-22 20:30:34
【问题描述】:

我需要的是只使用 html 和 css 创建像这样的跨网站透明水印。不知道如何将其始终保存在一个地方,例如:浏览器窗口的右下角。

提前致谢

【问题讨论】:

  • 你应该应用 opacity: .6;例如,将 div 定位为绝对位置。
  • 对于水印,您可以选择带有一些样式的 div,并将其固定在您喜欢的位置。由于您只需要 html 和 css,因此可以这样做。
  • @srekoble 也许是 jsfiddle?
  • @ArunKumar 你能把它应用到 jsfiddle 上吗?
  • 如果您希望水印在滚动时始终可见,请选择固定位置

标签: html css watermark


【解决方案1】:
#watermark
{
 position:fixed;
 bottom:5px;
 right:5px;
 opacity:0.5;
 z-index:99;
 color:white;
}

jSFiddle

【讨论】:

  • 我需要一些即使在滚动时也始终保持相同位置的东西
  • ^ 确实如此 - 抱歉 Fiddle 没有更新。立即尝试。
【解决方案2】:

要修复它:试试这个方法,

jsFiddleLink:http://jsfiddle.net/PERtY/

<div class="body">This is a sample body This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample bodyThis is a sample bodyThis is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    v
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    This is a sample body
    <div class="watermark">
           Sample Watermark
    </div>
    This is a sample body
    This is a sample bodyThis is a sample bodyThis is a sample body
</div>



.watermark {
    opacity: 0.5;
    color: BLACK;
    position: fixed;
    top: auto;
    left: 80%;
}

使用绝对:

.watermark {
    opacity: 0.5;
    color: BLACK;
    position: absolute;
    bottom: 0;
    right: 0;
}

jsFiddle:http://jsfiddle.net/6YSXC/

【讨论】:

    【解决方案3】:

    您可以为此使用opacity:0.5;//what ever you wish between 0 and 1

    工作Fiddle

    【讨论】:

      【解决方案4】:

      这可能对您有很大帮助。

      div.image
      {
      width:500px;
      height:250px;  
      border:2px solid;
      border-color:#CD853F;
      }
      div.box
      {
      width:400px;
      height:180px;
      margin:30px 50px;
      background-color:#ffffff;
      border:1px solid;
      border-color:#CD853F;
      opacity:0.6;
      filter:alpha(opacity=60);
      }
         div.box p
      {
      margin:30px 40px;
      font-weight:bold;
      color:#CD853F;
      }
      

      检查一次this link

      【讨论】:

        【解决方案5】:

        其他解决方案很棒,但他们没有考虑到水印不应该在鼠标选择时被选中。这个小提琴很管用:https://jsfiddle.net/MiKr13/d1r4o0jg/9/

        这将是 pdf 或静态 html 的更好选择。

        CSS:

        #watermark {
          opacity: 0.2;
          font-size: 52px;
          color: 'black';
          background: '#ccc';
          position: absolute;
          cursor: default;
          user-select: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          right: 5px;
          bottom: 5px;
        }
        

        【讨论】:

          【解决方案6】:

          我建议大家研究 CSS 网格。自 2017 年左右以来,大多数浏览器都支持它。这里是一些文档的链接:https://css-tricks.com/snippets/css/complete-guide-grid/。将页面元素保留在您想要的位置要容易得多,尤其是在响应性方面。我花了 20 分钟来学习如何做,而且我是新手!

          <div class="grid-div">
              <p class="hello">Hello</p>
              <p class="world">World</p>
          </div>
          
          
          //begin css//
          
          .grid-div {
              display: grid;
              grid-template-columns: 50% 50%;
              grid-template-rows: 50% 50%;
          }
          
          .hello {
              grid-column-start: 2;
              grid-row-start: 2;
          }
          
          .world {
              grid-column-start: 1;
              grid-row-start: 2;
          }
          
          

          此代码会将页面分成 4 个相等的象限,将“Hello”放在右下角,将“World”放在左下角,而无需更改它们的位置或使用边距。

          这可以外推到非常复杂的网格布局中,其中包含各种大小的重叠、无限网格,甚至是嵌套在网格内的网格,而不会在每次发生变化时都失去对元素的控制(MS Word,我在看你)。

          希望这对仍然需要它的人有所帮助!

          【讨论】:

          • 该代码不会提供重叠(它会积极地防止重叠!)或问题要求的半透明。 (也许可以使用 CSS Grid 作为问题所问问题的解决方案的一部分,但您没有)
          • 我今天刚刚使用 css 网格在我的页面上构建了一个与其他元素重叠的水印(这是这篇文章中的问题),所以我不知道你在说什么。此外,我给出的代码示例不是为了解决问题,而是为了说明网格是如何工作的;我认为这从我的描述中很清楚......
          【解决方案7】:

          .watermark{
          color:yellow;
          background-color:rgba(255, 0, 0, 0.5);
          height:30px;
          width:100px;
          display:flex;
          align-items:center;
          justify-content:center;
          position:fixed;
          bottom:5px;
          right:5px;
          }
          <html>
          <body>
          <div class="watermark">
          KwalityWorld
          </div>
          <pre>
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          </pre>
          </body>
          </html>

          【讨论】:

          • 欢迎来到 Stack Overflow!纯代码答案并不是特别有用。请添加一些关于此代码如何解决问题的描述并正确格式化您的代码。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-11-03
          • 1970-01-01
          • 2013-10-14
          相关资源
          最近更新 更多