현재 애드온을 하나 만드는 중입니다.

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를 생성하거나 아니면 다른 방법은 없을까요 ?

 

아래는 예시이구요. 

 

11.png

  • ?
    게시판의 경우 높이가 가변적이기 때문에, CSS만으로 텍스트 워터마크를 구현하는 건 힘드실거에요.
    (* 텍스트를 배경처럼 반복해서 보여줄 수 있는 CSS 속성은 없는 걸로 알고 있습니다.)

    워터마크를 이미지로 만들어서 배경 이미지로 적용하는 게 좋을 듯 합니다.