Question

我需要的是使用html和css创建这样的跨网站透明水印。不知道如何将它始终放在一个地方，例如：浏览器窗口的右下方。

提前致谢

enter image description here

Answer 1

#watermark
{
 position:fixed;
 bottom:5px;
 right:5px;
 opacity:0.5;
 z-index:99;
 color:white;
}

jSFiddle

Answer 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/

Answer 3

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

工作Fiddle

Answer 4

其他解决方案也不错，但是它们并没有考虑到不应从鼠标中选择水印的事实。这个小提琴会引起注意或：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;
}

Answer 5

.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>

Answer 6

这可能对你有很大的帮助。

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一次。

Answer 7

我建议大家研究一下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;
}

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

这可以推断为非常复杂的网格布局，具有重叠的各种大小的无限网格，甚至是嵌套在网格内的网格，而不会在每次更改时都失去对元素的控制（MS Word，我在看着您）。 / p>

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

使用html和css创建水印

7 个答案: