워터 마크 CSS는 인쇄

에서 작동하지 않는 I가 다음과 같은 CSS,워터 마크 CSS는 인쇄

#duplicateCopy { 
    -webkit-transform:rotate(-20deg); 
    -moz-transform:rotate(-20deg); 
    -o-transform:rotate(-20deg); 
    transform:rotate(-20deg); 
    color:#CCC; 
    font-weight:bold; 
    letter-spacing:5px; 
    position:absolute; 
    z-index:1000; 
    top:35%; 
    left:15%; 
    opacity:0.2; 
    filter:alpha(opacity=50); 
}

또한 내 html 페이지에서 다음 DIV

<div id="duplicateCopy"> 
<p style="font-size:70px">Duplicate Copy</p> 
</div>

에 워터 마크를 표시하는 데 사용되는 CSS의 위의 비트 HTML 페이지. 워터 마크가 브라우저 창에서 제대로 작동합니다. 그러나 인쇄물을 가져 오는 동안 워터 마크 텍스트는 보이지 않습니다. 워터 마크 텍스트를 인쇄 할 수 있도록하려면 어떻게합니까?

출처

2012-12-18 Hackableweb

해당 CSS에 media="print"을 사용하거나 media='all' 만 사용하여이 CSS를 별도의 파일에 작성하여 인쇄 모드에도 적용되도록하십시오. 또한 브라우저가 CSS3을 지원하는지 확인하십시오.

<link rel="stylesheet" type="text/css" media="all" src="css/style.css" />

또는 인쇄를 위해 별도의 스타일을 선호하는 경우, 단순히 사용 : 예를 들어

<link rel="stylesheet" type="text/css" media="print" src="css/print.css" />

와 print.css 파일에 그 CSS 스타일을 작성합니다.

출처

2012-12-18 09:46:19

해당 CSS에 @media를 추가했습니다. '@media all { #duplicateCopy { -webkit-transform : rotate (-20deg); -moz-transform : rotate (-20deg); -o-transform : rotate (-20deg); 변형 : rotate (-20deg); 색상 : #CCC; font-weight : bold; 문자 간격 : 5px; 직위 : 절대; z- 색인 : 1000; 상단 : 35 %; 왼쪽 : 15 %; 불투명도 : 0.2; 필터 : 알파 (불투명도 = 50); } }' 그러나 이것은 작동하지 않습니다 ... @media all 대신에 – Hackableweb

은 @tepkenvannkorn이 말한대로'@media print'를 시도합니다. – krish

그 협력 친구 ... 고맙습니다 ... – Hackableweb

워터 마크 CSS는 인쇄

답변

관련 문제