웹 사이트에 텍스트 워터 마크가 있습니까? 그것을하는 방법?

Question

저는 C++/C# 개발자이며 웹 페이지 작업에 많은 시간을 할애하지 않았습니다. 나는 몇몇 페이지의 배경에 큰 글씨로 텍스트를 (무작위로 그리고 대각선으로) 넣고 싶다. 나는 전경 텍스트를 읽을 수 있고 또한 "워터 마크"를 읽을 수 있기를 원합니다. 나는 이것이 아마도 색 선택의 기능이라고 생각합니다.

나는 내가 원하는 것을하려는 나의 시도에서 실패했다. 웹 디자인 도구 또는 html 지식을 가진 사람에게 이것이 매우 간단하다고 생각합니다.

Answer 1

워터 마크로 이미지를 만든 다음 css를 통해 이미지를 배경으로 설정할 수 있습니다. 예를 들어

: 작업을해야

<style type="text/css"> 
.watermark{background:url(urltoimage.png);} 
</style> 
<div class="watermark"> 
<p>this is some text with the watermark as the background.</p> 
</div> 

.

Answer 2

제안 된대로, png 배경이 작동하거나 심지어 페이지에 맞게 크기가 조정 된 절대적으로 배치 된 png 일 수도 있지만 원하는 경우 원하는 도구에 대한 의견을 묻는 중입니다. 무료로 가서, GIMP보십시오. 투명한 배경으로 캔버스를 만들고, 텍스트를 추가하고, 회전하고 원하는대로 크기를 조정 한 다음 레이어의 불투명도를 줄입니다.

당신은, 전체 페이지를 커버 클래스 '워터 마크'와 사업부를 만들고 같은로서의 스타일을 정의 싶어하는 경우 : 당신이 정말로 원하는 경우

 
.watermark 
{ 
    background-image: url(image.png); 
    background-position: center center; 
    background-size: 100%; /* CSS3 only, but not really necessary if you make a large enough image */ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    z-index: 10; 
} 

하는 이미지에 맞게 스트레칭 , 조금 더 가서 해당 div에 이미지를 추가하고 스타일을 너비/높이 (100 %;)에 맞게 정의 할 수 있습니다.

물론 이것은 중요한주의 사항이 있습니다. IE6 및 일부 오래된 브라우저는 투명 PNG로 무엇을해야할지 모를 수도 있습니다. 귀하의 사이트를 커버 거대한, 불투명 이미지가 확실히하지 않습니다. 그러나이 문제를 해결하기 위해 some hacks이 있습니다. 운좋게도 투명 PNG를 사용한다면 가장 할 수 있습니다.

Answer 3

위의 kavendek의 제안에서 CSS에 "background-attachment : fixed"를 추가하면 배경 이미지를 창에 지정된 위치에 "고정"할 수 있습니다. 이렇게하면 워터 마크가 사용자가 페이지를 어디서 스크롤해도 항상 볼 수 있습니다.

개인적으로 시각적으로 귀찮은 고정 배경 이미지가 있지만 사이트 소유자는 자신의 로고나 저작권 고지 (이미지로 렌더링 됨)가 항상 사용자의 코 밑에 있다는 것을 알고 있다고 들었습니다.

Answer 4

<style type="text/css"> 
#watermark { 
    color: #d0d0d0; 
    font-size: 200pt; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    z-index: -1; 
    left:-100px; 
    top:-200px; 
} 
</style> 

이렇게하면 텍스트를 워터 마크로 사용할 수 있습니다. 웹 페이지의 개발/테스트 버전에 적합합니다.

<div id="watermark"> 
<p>This is the test version.</p> 
</div>