웹 사이트에서 반복되는 텍스트 배경 만들기?

Question

웹 사이트의 배경으로 반복되는 텍스트를 넣으라는 요청을 받았습니다.

종이를 덮는 것을 반복하는 이름, 슬로건이있는 물리적 회사와 비슷한 배경색을 약간 가볍게 표시합니다.

나는 (원활한 반복을 얻으려고 노력)

<div style="z-index: -1; position: fixed; font-size: 20pt; color: rgb(148, 148, 148); 
text-align: justify;">Repeating Text Here Repeating Text Here Repeating Text Here</div> 

내가 반복 이미지를 사용하는 것은 큰 두통처럼 보인다 같은 일반적인 관점에서이 솔루션을 원하는 페이지에 다음과 같은 사업부를 넣어 간단하게 충분히 그것을 조롱 그리고 텍스트 기반은 더 나은 대역폭 현명한 것 같습니다.

그러나 높은 해상도로 최대화 된 브라우저 창을 덮을만큼 충분한 텍스트를 페이지에 갖기 위해 여러 번 HTML 텍스트를 수동으로 반복합니다.

좀 더 우아한 해결책이 있다면 궁금합니다. CSS를 기반으로 X 시간을 반복 할 수 있을지도 모릅니다.

PHP, ASP.Net 등으로 html 서버 측에 X 번 텍스트를 반복 할 수 있다는 것을 알고 있지만 html 소스 출력에서 ​​그런 텍스트를 반복하지 않아도되는 무언가를 찾고 있습니다.

JavaScript 기반으로 할 수는 있지만 JavaScript가없는 사용자에게는 표시되지 않습니다. JavaScript로 볼 수있는 이점은 Google의 반복 텍스트가 보이지 않고 키워드 조회수를 높이려는 시도라고 생각하는 봇일 것입니다.

코멘트 응답 :
텍스트는 정적은, 본질적으로는 회사의 슬로건이다. 사진이 순수한 흰색 배경을 가진 대신에 연한 회색의 "웹을 더 나은 곳으로 만들기"를 반복하여 반복적으로 사용하는 경우 사진입니다.

내가보기에 근거하여이 이미지를 처리 ​​할 때의 문제는 텍스트가 부족하여 브라우저 창의 너비가 달라 지므로 줄 바꿈하는 것입니다.

을 웹을 웹에게 웹을 웹에게 더 나은 장소

웹을 만드는 더 나은 곳으로 만드는 더 나은 곳으로 만드는 더 나은 곳으로 만드는 더 나은 곳으로 만들기 :

그것은 때때로 갈 필요가있을 것이다

웹을 더 나은 곳으로 만드는 일을 만들기 : 당신이 감소하는 경우

그런 다음 브라우저는 할 필요가 거라고 폭 전자 웹을 더 나은 곳으로 웹을 만드는 더 나은 곳으로 웹을 만들기 당신이 타일 이미지와 함께, 당신이 끝날 거라고하고 있다면 더 나은 장소가

만들기 :

만들기 웹은 더 나은 장소는 웹 자바 스크립트를 사용하지 않을 경우, 동적 이미지 생성기를 만들 수

Answer 1

지금은 자바 스크립트를 통해 그것을 한 적이 오픈 한 정지 더 나은 솔루션을 제공합니다.

나는

<div id="Slogan" style="z-index: -1; position: fixed; font-size: 20pt; color: #999999; text-align: justify; margin-left: 6px; margin-right: 6px;"></div> 

그런 다음 신체의에 onLoad에서 호출되는 자바 스크립트 함수를 만들어 빈 HTML의 DIV를 만들어

function FillSlogan() 
{ 
    var text = ''; 

    for(var i=0; i<50; i++) 
    { 
     text += 'Making the Web a Better Place '; 
    } 

    $('#Slogan').html(text); 
} 

FillSlogan 기능은 포함 파일에 있고 거부됩니다 좋은 측정을 위해 robots.txt에.

이렇게하면 정렬 및 줄 바꾸기 기능을 사용할 수 있지만 반복 된 텍스트는 봇에서 멀리 떨어지지 않게 유지됩니다.

Answer 2

웹을 만들기 웹을 더 나은 곳으로 만들기 만들기 웹을 더 나은 곳으로 만들기 웹 만들기 같이 서버 측 구성 요소 (서블릿, PHP는 무엇이든)를 생성하고이를 URL에 지정된 생성 텍스트와 함께 이미지 소스로 사용합니다. (당신이 이미지 생성에 대해 서로 다른 텍스트 문자열을 지정할 수있는 것 자체가 스크립트에 의해 생성 될 수있다) 당신의 CSS에서이 같은 뭔가 :

body{ 
    background-image: url('http://example.com/myimageservlet?msg=I+want+this+text+as+my+repeating+background'); 
    background-repeat: repeat; 
} 

Answer 3

캔버스 + 자바 스크립트로 재생할 수 있습니다. 캔버스를 만들어 배경으로 사용하는 가장 간단한 방법은 다음과 같습니다.

 

    var text = 'Making the Web a Better Place Making the Web'; 
    var canvas = document.createElement("canvas"); 
    var fontSize = 24; 
    canvas.setAttribute('height', fontSize); 
    var context = canvas.getContext('2d'); 
    context.fillStyle = 'rgba(0,0,0,0.1)'; 
    context.font   = fontSize + 'px sans-serif'; 
    context.fillText(text, 0, fontSize); 

    $('#elementId').css({'background-image':"url(" + canvas.toDataURL("image/png")+ ")" });