使用 html 和 css 创建水印答案

【问题标题】：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 上吗？
如果您希望水印在滚动时始终可见，请选择固定位置

【解决方案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！纯代码答案并不是特别有用。请添加一些关于此代码如何解决问题的描述并正确格式化您的代码。