현재 애드온을 하나 만드는 중입니다.
xe본문에 watermark를 보여주는 애드온인데요.
<div id='watermark_parent' >
<div id='watermark_copy'>
<p>{$watermark_text1}</p>
<p>{$watermark_text2}</p>
<p>{$watermark_text3}</p>
</div>
</div>
이렇게 html파일을 만들고
jquery로 content높이를 측정해서 높이에 따라 아래 div를 복사해서 위치시키는 방식입니다.
그런데, css를
#watermark_copy {
position: absolute ;
top: 40px;
width: 100%;
text-align: center;
opacity: .7;
transform: rotate(-10deg);
transform-origin: 50% 50%;
z-index: 0;
font-size:30px;
}
#watermark_copy1 {
position: absolute ;
top: 390px;
width: 100%;
text-align: center;
opacity: .7;
transform: rotate(-10deg);
transform-origin: 50% 50%;
z-index: 0;
font-size:30px;
}
줘서 watermark 효과를 주긴 줬는데요. 이게 너무 바보 같은 방식 같아서 ,
혹시 자동으로 css를 생성하거나 아니면 다른 방법은 없을까요 ?
아래는 예시이구요.
(* 텍스트를 배경처럼 반복해서 보여줄 수 있는 CSS 속성은 없는 걸로 알고 있습니다.)
워터마크를 이미지로 만들어서 배경 이미지로 적용하는 게 좋을 듯 합니다.