利用DIV层实现图片水印效果

最新推荐文章于 2024-06-20 11:27:04 发布
最新推荐文章于 2024-06-20 11:27:04 发布
阅读量4.3k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： Asp.Net 文章标签： div function 网络 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ojekleen/article/details/2739236
本文介绍了一种利用DIV层实现在网页中为图片添加水印的方法，此方法适用于多种情况，尤其是当需要根据不同页面使用不同水印图片时。通过JavaScript实现水印的位置设置为图片的右下角。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 很多情况下图片在WEB显示的时候要加水印,利用gui+网络上也有很多类似的代码,

但是在页面不同并要求加的水印图片不同的情况下,利用gui实现就只有把各种情况下加上的水印图片都准备好,再分别调用不同的图片路径,这样就未免会耗费资源,为了更好实现可能出现多个水印状况的图片,好的方式就是利用DIV层来实现图片的水印.

整段代码竟用JS实现,水印位置为右下角,水印图片为.png格式.

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>




    
   


    
 

        
  

            
   

       

        四季天体星相仪 
        

          
        

       

        
  

    
 





                

        

    

    
  



    



                



	

		

			

				
					
JS用层实现为图片添加水印效果

				
			

			

				

					10-26
				

			

		

		

			
				
JS用层实现为图片添加水印效果JS用层实现为图片添加水印效果JS用层实现为图片添加水印效果JS用层实现为图片添加水印效果JS用层实现为图片添加水印效果JS用层实现为图片添加水印效果JS用层实现为图片添加水印效果JS用层实现为图片添加水印效果JS用层实现为图片添加水印效果JS用层实现为图片添加水印效果

			
		

	



                

            
              



	

		

			

				
					
前端水印实现指南

					
最新发布

				
			

			

				

					liangshanbo1215的博客
				

				

					06-26
					
					1403
					
				

			

		

		

			
				
前端水印是一种在网页内容上叠加半透明文字或图片的技术，主要用于版权保护、防截图和溯源追踪。以下是几种常见的前端水印实现方式及其优缺点分析。

			
		

	



              


  
              

                


	

		

			

				
					
div添加水印

				
			

			

				

					jattxgt的博客
				

				

					08-05
					
					1810
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        bod.

			
		

	





	

		

			

				
					
HTML使用div实现水印效果（文件预览）

				
			

			

				

					xiao_b_a_i的博客
				

				

					06-20
					
					723
					
				

			

		

		

			
				
html添加水印

			
		

	



		

			
		



	

		

			

				
					
使用JS给页面添加水印效果

				
			

			

				

					默存
				

				

					12-26
					
					6165
					
				

			

		

		

			
				
原文：https://www.cnblogs.com/Miracle-ZLZ/p/9340249.html

此方法可以给整个页面或某个div添加水印效果。

1、普通使用方式：


$(document).ready(function() {
        var watermark_txt = "测试效果" + getDate();
        watermark({"watermarl...

			
		

	





	

		

			

				
					
使用JS实现文字层浮在图片上方的水印效果

				
			

			

				

					
				

			

		

		

			
				
水印效果是一种图像处理技术，通过在原始图片上添加一层半透明或透明的图案（可以是文字或图片）来实现。这种技术可以保护图片版权，防止未授权使用，同时也常用于装饰和增加图片的视觉效果。  ### 知识点二：HTML...

			
		

	





	

		

			

				
					
利用JavaScript实现网页水印效果

				
			

			

				

					
				

			

		

		

			
				
水印通常可以分为图片水印和文字水印两大类，而使用JavaScript（简称js）脚本实现的水印效果则是动态地、灵活地在网页上添加水印元素。本文将详细介绍使用js脚本实现水印效果的相关知识点。  ### 1. 水印的概念和...

			
		

	





	

		

			

				
					
使用JS在图片上添加水印效果的实现方法

				
			

			

				

					
				

			

		

		

			
				
通过JavaScript获取图片的位置信息，然后创建一个绝对定位的div元素作为水印层，放置在图片上方，从而实现水印效果。同时，当窗口大小改变时，页面会自动重载以适应新的布局。"  在网页设计中，添加水印是一种常见的...

			
		

	





	

		

			

				
					
利用jQuery实现动态自适应网页水印效果

				
			

			

				

					
				

			

		

		

			
				
 使用jQuery创建一个`<div>`元素作为水印层，并设置其基本样式。例如：  ```javascript  $(document).ready(function() {  var watermark = $('<div id="watermark"></div>');  watermark.text('版权所有 © 我的...

			
		

	





	

		

			

				
					
写一个水印效果写了好久，最终败给了canvas，还是选择用div写水印

				
			

			

				

					qq_26406269的博客
				

				

					06-27
					
					246
					
				

			

		

		

			
				
做一个小功能做了很久才做出来，而且还不完美，也百度借鉴了很多别人的代码

			
		

	





	

		

			

				
					
页面CSS水印

				
			

			

				

					03-11
				

			

		

		

			
				
使用css对页面内容加载水印样式，防止复制、截屏、打印等非法获取页面内容。

			
		

	





	

		

			

				
					
html水印使用js和div实现,js实现网页水印

				
			

			

				

					weixin_29505425的博客
				

				

					06-18
					
					320
					
				

			

		

		

			
				
js实现网页水印效果图：代码：1 2             function watermark(t1,t2,t3){3                 var maxWidth = document.documentElement.clientWidth;4                 var maxHeight = document.documentElement.clientHeigh...

			
		

	





	

		

			

				
					
html水印使用js和div实现,前端利用DOM元素生成水印及防范

				
			

			

				

					weixin_30711615的博客
				

				

					06-18
					
					493
					
				

			

		

		

			
				
index.html这是内容index.css#water-mark {pointer-events: none;// 元素永远不会成为鼠标事件的target，解决水印覆盖在最上方，导致下层元素，无法执行鼠标事件}span {display: inline-block;width: 200px;transform: rotate(-15deg);position: absolute;}index....

			
		

	





	

		

			

				
					
js 添加水印

				
			

			

				

					Fisher_yu01的博客
				

				

					05-14
					
					651
					
				

			

		

		

			
				
index.js：



export const watermark = (settings) =>{

// 默认设置

var defaultSettings = {

watermark_txt: 'text',

watermark_x: 20, // 水印起始位置x轴坐标

watermark_y: 20, // 水印起始位置Y轴坐标

watermark_rows: 0...

			
		

	





	

		

			

				
					
overflowhidden把内容遮住了怎么办_图片有水印怎么办？不用PS，有这4招就够了

				
			

			

				

					weixin_39608457的博客
				

				

					11-16
					
					1350
					
				

			

		

		

			
				
大家好，我是热衷解决问题的秋小叶！俗话说，文不如表，表不如图！图片是我们在做 PPT 时经常会使用到的高频元素。阿文老师曾经说过：但是，在没有接触到正确的搜图方法前，我们往往会在搜索引擎中搜到很多带有水印的图片，怎么办呢？今天，让晓阳老师来教大家解决这个问题吧~开始今天的教程之前需要事先声明一下：一般有水印的图片都是有版权的图片，仅供大家个人学习练习使用，如果涉及到商用，请前往图库或者联系图片版权...

			
		

	





	

		

			

				
					
win11取消文件夹分组

				
			

			

				

					renkai721的专栏
				

				

					10-17
					
					5565
					
				

			

		

		

			
				
win10取消文件夹分组，取消排序,win11取消分组，取消排序

			
		

	





	

		

			

				
					
页面添加水印

				
			

			

				

					weixin_47723644的博客
				

				

					11-18
					
					818
					
				

			

		

		

			
				
页面添加水印实现思路实现代码
实现思路
原理：通过子绝父相的方式生成一些div，再通过循环的方式将水印的默认配置项设置为这些div的样式，最后调整父级节点的位置。
实现代码
  // 添加水印之前判断之前有没有水印，如果有先删除之前的水印，否则水印会越来越深
  waterMask = (newSetting) => {
    if(document.getElementById('mask_div00') === null){
      this.addWaterMask();
    }els

			
		

	





	

		

			

				
					
如何给页面元素添加水印背景，在vue中怎么处理？

				
			

			

				

					球球不吃虾WHR2349博客
				

				

					07-01
					
					2974
					
				

			

		

		

			
				
这里写一个简单的给页面元素添加水印背景的方法，主要是添加文字行的。
这里我写的注释很详细了，不会的可以看看canvas的相关api。
步骤2

如果是在普通的项目里，直接调用上面的方法就可以实现简单的水印背景效果了。
这里重点说一下在vue中，使用自定义指令的方式：
为什么使用自定义指令？主要因为自定义指令里面带有el这个页面元素参数，所以说自定义指令主要就是用来干这个活儿的。


步骤3：应用自定义指令
自行改造，传入更多的参数，或者改变传入参数的方式都行！
您的三连支持是我......

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值