blocks|key|4668088|text|#watermark
{
+position:fixed;
+bottom:5px;
+right:5px;
+opacity:0.5;
+z-index:99;
+color:white;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4668089|jSFiddle|unstyled|offset|length|4668090|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/RgajZ/3/^0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

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

<p><a href="http://jsfiddle.net/RgajZ/3/" rel="noreferrer">jSFiddle</a></p>


blocks|key|4668125|text|要修复它，请尝试以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4668126|jsFiddleLink：http://jsfiddle.net/PERtY/|offset|length|4668127|<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%25;
}|code-block|syntax|javascript|4668128|要使用绝对，请执行以下操作：|4668129|.watermark+{
++++opacity:+0.5;
++++color:+BLACK;
++++position:+absolute;
++++bottom:+0;
++++right:+0;
}|4668130|jsFiddle：http://jsfiddle.net/6YSXC/|4668131|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/PERtY/|1|http://jsfiddle.net/6YSXC/^0|0|D|Q|0|0|0|0|0|9|Q|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

<p>To make it fixed: Try this way, </p>

<p>jsFiddleLink: <a href="http://jsfiddle.net/PERtY/" rel="nofollow">http://jsfiddle.net/PERtY/</a></p>

<pre><code>&lt;div class="body"&gt;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
    &lt;div class="watermark"&gt;
           Sample Watermark
    &lt;/div&gt;
    This is a sample body
    This is a sample bodyThis is a sample bodyThis is a sample body
&lt;/div&gt;



.watermark {
    opacity: 0.5;
    color: BLACK;
    position: fixed;
    top: auto;
    left: 80%;
}
</code></pre>

<p>To use absolute:</p>

<pre><code>.watermark {
    opacity: 0.5;
    color: BLACK;
    position: absolute;
    bottom: 0;
    right: 0;
}
</code></pre>

<p>jsFiddle: <a href="http://jsfiddle.net/6YSXC/" rel="nofollow">http://jsfiddle.net/6YSXC/</a></p>


blocks|key|162096|text|为此，您可以使用opacity:0.5;//what+ever+you+wish+between+0+and+1。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|162097|工作Fiddle|162098|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/wizam/3fTN7/1/^0|8|1C|0|2|6|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>you may use <code>opacity:0.5;//what ever you wish between 0 and 1</code> for this.</p>

<p>working <a href="http://jsfiddle.net/wizam/3fTN7/1/" rel="nofollow">Fiddle</a></p>


blocks|key|4668203|text|其他的解决方案也不错，但它们没有考虑到水印不应该在鼠标选择时被选中的事实。这把小提琴负责还是那把小提琴：https://jsfiddle.net/MiKr13/d1r4o0jg/9/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4668204|对于pdf或static+html，这将是更好的选择。|4668205|CSS：|4668206|#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;
}|code-block|syntax|javascript|4668207|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/MiKr13/d1r4o0jg/9/^0|1G|13|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Other solutions are great but they didn't take care of the fact that watermark shouldn't get selected on selection from the mouse. This fiddle takes care or that: <a href="https://jsfiddle.net/MiKr13/d1r4o0jg/9/" rel="nofollow noreferrer">https://jsfiddle.net/MiKr13/d1r4o0jg/9/</a></p>
<p>This will be better option for pdf or static html.</p>
<p>CSS:</p>
<pre class="lang-css prettyprint-override"><code>#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;
}
</code></pre>


blocks|key|162200|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162201|.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;
}|code-block|syntax|javascript|162202|<html>
<body>
<div+class="watermark">
KwalityWorld
</div>
<pre>

































</pre>
</body>
</html>|162203|162204|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;body&gt;
&lt;div class="watermark"&gt;
KwalityWorld
&lt;/div&gt;
&lt;pre&gt;

































&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|162183|text|我建议每个人都去看看CSS网格。大约从2017年开始，大多数浏览器都支持它。下面是一些文档的链接：https://css-tricks.com/snippets/css/complete-guide-grid/。把你的页面元素放在你想要的地方要容易得多，特别是在响应方面。我花了20分钟才学会怎么做，而且我还是个新手！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|162184|<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%25+50%25;
++++grid-template-rows:+50%25+50%25;
}

.hello+{
++++grid-column-start:+2;
++++grid-row-start:+2;
}

.world+{
++++grid-column-start:+1;
++++grid-row-start:+2;
}|code-block|syntax|javascript|162185|这段代码将把页面分成4个相等的象限，将"Hello“放在右下角，"World”放在左下角，而不必改变它们的位置或边距。|162186|这可以推断为非常复杂的网格布局，具有重叠的、各种大小的无限网格，甚至网格中嵌套的网格，而不会在每次发生变化时失去对元素的控制(MS+Word我正在看着你)。|162187|希望这能帮助那些仍然需要它的人！|162188|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/css/complete-guide-grid/^0|1D|1K|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>I would recommend everyone look into CSS grids.  It has been supported by most browsers now since about 2017.  Here is a link to some documentation: <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow noreferrer">https://css-tricks.com/snippets/css/complete-guide-grid/</a> .  It is so much easier to keep your page elements where you want them, especially when it comes to responsiveness.  It took me all of 20 minutes to learn how to do it, and I'm a newbie!</p>
<pre><code>&lt;div class=&quot;grid-div&quot;&gt;
    &lt;p class=&quot;hello&quot;&gt;Hello&lt;/p&gt;
    &lt;p class=&quot;world&quot;&gt;World&lt;/p&gt;
&lt;/div&gt;


//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;
}

</code></pre>
<p>This code will split the page into 4 equal quadrants, placing the &quot;Hello&quot; in the bottom right, and the &quot;World&quot; in the bottom left without having to change their positioning or playing with margins.</p>
<p>This can be extrapolated into very complex grid layouts with overlapping, infinite grids of all sizes, and even grids nested inside grids, without losing control of your elements every time something changes (MS Word I'm looking at you).</p>
<p>Hope this helps whoever still needs it!</p>


blocks|key|162123|text|这可能会对你有很大的帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162124|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;
}|code-block|syntax|javascript|162125|检查this+link一次。|offset|length|162126|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/u8r4f/^0|0|0|2|9|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Possibly this can be of great help for you.</p>

<pre><code>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;
}
</code></pre>

<p>Check <a href="http://jsfiddle.net/u8r4f/" rel="nofollow">this link</a> once.</p>


<p>What I need is to create cross website transparent watermark like this using only html and css. Have no idea how to keep that always in one place for ex: right bottom side of browser window.</p>

<p>Thanks in advance</p>

<p><img src="https://i.stack.imgur.com/m6A4D.png" alt="enter image description here"></p>


Creating watermark using html and css

我需要的是创建像这样只使用html和css的跨网站透明水印。我不知道如何让它始终保持在一个地方，例如:浏览器窗口的右下侧。提前感谢​​

问使用html和css创建水印
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用html和css创建水印EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用html和css创建水印
EN