本文档包含 水印背景图片、水印背景文字 2 种功能实现。
以下 2 种方法实现了打印附带水印，浏览页面是不显示水印功能。并可很简单就改成在以上 2 种状态时都显示水印的状态。
1、水印图片
实现思路：使用 img 标签引入图片作为水印图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css" media="screen">
body {
background-color: #eee;
}
#two {
width: 640px;
height: 840px;
margin: 0 auto;
padding: 10px 15px;
background-color: #FFFFFF;
margin-top: 10px;
position: relative;
z-index: 1;
}
#two-bg img {
display: none;
}
</style>
<style media="print">
#two-bg {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
}
#two-bg img {
display: block;
width: 300px;
opacity: .3;
transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
margin: 0 auto;
margin-top: 190px;
}
</style>
</head>
<body>
<input type="button" name="print" value="print" onclick="javascript:testprint();" />
<!--使用定位添加水印，正常显示网页时不显示水印图片，点击打印预览时才显示-->
<div id="two">
<article>
阿Q没有家，住在未庄的土谷祠②里；也没有固定的职业，只给人家做短工，割麦便割麦，舂米便舂米，撑船便撑船。工作略长久时，他也或住在临时主人的家里，但一完就走了。所以，人们忙碌的时候，也还记起阿Q来，然而记起的是做工，并不是“行状”；一闲空，连阿Q都早忘却，更不必说“行状”了。只是有一回，有一个老头子颂扬说：“阿Q真能做！”这时阿Q赤着膊，懒洋洋的瘦
阿Q又很自尊，所有未庄的居民，全不在他眼神里，甚而至于对于两位“文童”③也有以为不值一笑的神情。夫文童者，将来恐怕要变秀才者也；赵太爷钱太爷大受居民的尊敬，除有钱之外，就因为都是文童的爹爹，而阿Q在精神上独不表格外的崇奉，他想：我的儿子会阔得多啦！加以进了几回城，阿Q自然更自负，然而他又很鄙薄城里人，譬如用三尺三寸宽的木板做成的凳子，未庄人叫“长凳”，他也叫“长凳”，城里人却叫“条凳”，他想：这是错的，可笑！油煎大头鱼，未庄都加上半寸长的葱叶，城里却加上切细的葱丝，他想：这也是错的，可笑！然而未庄人真是不见世面的可笑的乡下人呵，他们没有见过城里的煎鱼！
谁知道阿Q采用怒目主义之后，未庄的闲人们便愈喜欢玩笑他。一见面，他们便假作吃惊的说：哙，亮起来了。”
</article>
<!--图片透明 png 格式的图片-->
<div id="two-bg">
<img src="img/logo.jpg" />
<img src="img/logo.jpg" />
<img src="img/logo.jpg" />
</div>
</div>
<script>
function testprint() {
var body = document.getElementById("two")
document.body.innerHTML = body.innerHTML
window.print()
}
// 打印后或取消后重载页面，因为打印预览弹框弹出后会导致样式爆炸
window.onafterprint = function () {
location.reload()
}
</script>
</body>
</html>2、水印文字
实现思路：网上找的，不大清楚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css" media="screen">
body {
background-color: #eee;
}
#two {
margin: 0 auto;
width: 640px;
padding: 10px 15px;
background-color: #fff;
margin-top: 10px;
position: relative;
z-index: 1;
}
</style>
<style media="print">
input {
display: none;
}
#two {
padding: 10px 15px;
background-color: #fff;
margin-top: 10px;
position: relative;
}
</style>
</head>
<body>
<input type="button" name="print" value="print" onclick="javascript:testprint();" />
<!--使用定位添加水印，正常显示网页时不显示水印图片，点击打印预览时才显示-->
<div id="two">
<ul>
<li>这是第1个</li>
<li>这是第2个</li>
<li>这是第3个</li>
<li>这是第4个</li>
<li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li>
<li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li>
<li>这是第4个</li>
<li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li>
<li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li>
<li>这是第4个</li>
<li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li>
<li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li>
<li>这是第4个</li>
<li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li>
<li>这是一大段文字照着找着做做做做做做扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩做做做做做做做做做</li>
<li>这是第4个</li>
<li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li>
<li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li>
<li>这是第3个</li>
<li>这是第4个</li>
<li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li>
<li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li>
<li>这是第4个</li>
<li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li>
<li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li>
<li>这是第4个</li>
<li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li>
<li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li>
<li>这是第4个</li>
<li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li>
<li>这是一大段文字照着找着做做做做做做扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩做做做做做做做做做</li>
<li>这是第4个</li>
<li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li>
<li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li>
</ul>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<!-- <script src="js/watermark.jquery.min.js"></script> -->
<script type="text/javascript">
function testprint() {
watermark({ watermark_txt: "温州机场" })//传入动态水印内容
window.print()
}
window.onafterprint = function () {
location.reload()
}
function watermark(settings) {
//默认设置
var defaultSettings = {
watermark_txt: "text",
watermark_x: 100,//水印起始位置x轴坐标
watermark_y: 20,//水印起始位置Y轴坐标
watermark_rows: 20,//水印行数
watermark_cols: 20,//水印列数
watermark_x_space: 100,//水印x轴间隔
watermark_y_space: 50,//水印y轴间隔
watermark_color: '#bd1b21',//水印字体颜色
watermark_alpha: 0.3,//水印透明度
watermark_fontsize: '18px',//水印字体大小
watermark_font: '微软雅黑',//水印字体
watermark_width: 120,//水印宽度
watermark_height: 80,//水印长度
watermark_angle: 15//水印倾斜度数
};
//采用配置项替换默认值，作用类似jquery.extend
if (arguments.length === 1 && typeof arguments[0] === "object") {
var src = arguments[0] || {};
for (key in src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
continue;
else if (src[key])
defaultSettings[key] = src[key];
}
}
var oTemp = document.createDocumentFragment();
//获取页面最大宽度
var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
//获取页面最大长度
var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight);
//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
if (defaultSettings.watermark_cols == 0 ||
(parseInt(defaultSettings.watermark_x
+ defaultSettings.watermark_width * defaultSettings.watermark_cols
+ defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1))
> page_width)) {
defaultSettings.watermark_cols =
parseInt((page_width
- defaultSettings.watermark_x
+ defaultSettings.watermark_x_space)
/ (defaultSettings.watermark_width
+ defaultSettings.watermark_x_space));
defaultSettings.watermark_x_space =
parseInt((page_width
- defaultSettings.watermark_x
- defaultSettings.watermark_width
* defaultSettings.watermark_cols)
/ (defaultSettings.watermark_cols - 1));
}
//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
if (defaultSettings.watermark_rows == 0 ||
(parseInt(defaultSettings.watermark_y
+ defaultSettings.watermark_height * defaultSettings.watermark_rows
+ defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1))
> page_height)) {
defaultSettings.watermark_rows =
parseInt((defaultSettings.watermark_y_space
+ page_height - defaultSettings.watermark_y)
/ (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
defaultSettings.watermark_y_space =
parseInt((page_height
- defaultSettings.watermark_y
- defaultSettings.watermark_height
* defaultSettings.watermark_rows)
/ (defaultSettings.watermark_rows - 1));
}
var x;
var y;
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
var mask_div = document.createElement('div');
mask_div.id = 'mask_div' + i + j;
mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
//设置水印div倾斜显示
mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.visibility = "";
mask_div.style.position = "absolute";
mask_div.style.left = x + 'px';
mask_div.style.top = y + 'px';
mask_div.style.overflow = "hidden";
mask_div.style.zIndex = "9999";
//mask_div.style.border="solid #eee 1px";
mask_div.style.opacity = defaultSettings.watermark_alpha;
mask_div.style.fontSize = defaultSettings.watermark_fontsize;
mask_div.style.fontFamily = defaultSettings.watermark_font;
mask_div.style.color = defaultSettings.watermark_color;
mask_div.style.textAlign = "center";
mask_div.style.width = defaultSettings.watermark_width + 'px';
mask_div.style.height = defaultSettings.watermark_height + 'px';
mask_div.style.display = "block";
oTemp.appendChild(mask_div);
};
};
document.body.appendChild(oTemp);
}
</script>
</body>
</html>
1246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
