需求:
1. 打印页面中部分的内容,并为其添加背景水印效果
2. 水印图片只在打印时出现。
3. 要求水印必须可以随着打印内容长度的增长而repeat
4.无法手动去除水印
问题分析:
1. 在此需求的制作过程中,遇到过各种问题,比如,通常各个浏览器会对自带的打印机功能进行手动设置,在打印预览界面可以用户可以手动勾选是否显示背景图片和颜色,这就使得css中的background-image以及background-color属性无法满足效果。
此时,只能使用img标签在页面添加水印。
2. 这时候新的问题又出现了,img标签所添加的图片是不可以repeat,并且如果想img作为背景出现。
处于以上问题,想到可以使用jquery来实现img的repeat,并使用css中的层控制来实现img作为背景在打印信息的下面出现。
实现:
css(使用定位将图片文字按照层级显示):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.image{// 没有打印时水印图片不显示
display
:
none
;
}
@media
print
{
.image{//使用相对定位将水印图片层级往下,显示成背景效果
position
:
relative
;
top
:
0px
;
z-index
:
-100px
;
width
:
700px
;
display
:
inline
;
}
.text{//使用绝对定位将需要打印的内容的层级往上显示,并设置显示的位置
position
:
absolute
;
top
:
190px
;
z-index
:
100px
;
width
:
700px
;
}
#sub-nav, #header-container, #nav-container, #footer{//将页面不需要打印的部分隐藏
display
:
none
;
}
}
|
html:
1
2
3
4
|
<
div
class="image" id="a"></
div
>
<
div
class="text" id="text">
This is messages......
</
div
>
|
Jquery(获取text的div区域大小并计算使水印图片按照文字的长度进行repeat):
1
2
3
4
5
6
7
8
9
10
|
<script type=
"text/javascript"
src=
"jquery-1.4.4.min.js"
></script>
<script>
$(document).ready(
function
(){
var
conHeight = $(
"#text"
).height();
var
conWidth = $(
"#text"
).width();
var
num = Math.ceil(conHeight*conWidth/800/855);
for
(i=0;i<num;i++)
$(
'#a'
).append(
'<img src="waterMarkUrl" />'
);
});
</script>
|
总结:
在使用定位布局时,需要注意页面布局是否变化,必要时需要清除浮动使页面布局不受影响。