대각선으로 배경을 반복하는 방법 (한 줄에 한 번만)

Question

대각선 방향이 아닌 수직 또는 수평이 아닌 배경을 반복하고 싶습니다. 그 방법을 알고 계십니까? 예를 들어, 왼쪽 상단에서 시작하여 오른쪽 아래에 대각선으로 반복되는 체인이 필요합니다. 여러 이미지가있는 배경 반복 솔루션을 생각하고있었습니다. 하나는 유용한 배경으로 다른 배경 (매미 메서드)에 겹쳐 있지만, 그렇지 않았습니다. 당신이 이것에 대한 해결책을 안다면 나에게 알려줘.

Answer 1

가 회전 방식으로 배경 이미지를 포함하는 :before 규칙을 만들고 그것을 변환 :

.foo:before { 
    display: block; 
    background: url("myimage") repeat-x; 
    position: absolute; 
    height: 100px; 
    top: -50px; 
    left: 0; 
    width: 200%; 
    transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform-origin: left center; 
    -moz-transform-origin: left center; 
    -webkit-transform-origin: left center; 
    content: ""; 
    z-index: -1; 
} 

.foo { 
    position: relative; 
    overflow: hidden; 
} 

http://jsfiddle.net/r8BzE/

Answer 2

가능한 가장 간단한 방법은 대각선 배경이 포함 된 충분히 큰 (말하자면, 500x500) png 이미지를 만드는 것입니다. 할 수 있으면, 파일 크기가 클 수 없습니다.

두 번째 해결책은 여러 div를 생성하는 것입니다.

당신은 500x500 div의 배경으로 대각선으로 복제하려는 50x50 png 이미지가 있다고 가정 해보십시오.

높이가 각각 50px (10 %) 인 수평 div를 10 개 만들고 연속적인 div +50 배경 위치 -x를 지정하십시오.

#div1{ 
    background:transparent url(my_bg.png) 0px top repeat-y; 
} 
#div2{ 
    background:transparent url(my_bg.png) 50px top repeat-y; 
} 
#div3{ 
    background:transparent url(my_bg.png) 100px top repeat-y; 
} 

등 또한 PHP 또는 사용중인 모든 서버 측 언어이 CSS를 생성 할 수 있습니다.

예 PHP 코드 : 일반 CSS는 하나의 사업부 대각선 배경을 달성하기 위해 함께

<style type="text/css"> 
<?php 
for ($i = 0; $i < 10; $i++){ 
    echo "#div$i{ background:transparent url(my_bg.png) ".(50*$i)."px top repeat-y; }"; 
} 
?> 
</style> 

그러나 그것은 단지 수 없습니다.

Answer 3

당신은 일을 이런 식으로 뭔가를 얻을 수 있습니다

http://jsfiddle.net/johnkpaul/8LmgF/

http://johnkpaul.tumblr.com/post/17057209155/wish-background-repeat-had-a-repeat-diagonal-option

이

코드는이 같은 같습니다

.original-background{  
    background:url(http://img850.imageshack.us/img850/2400/rowofstars.gif) repeat; 
} 

.diagonal-background:before{ 
    content:""; 
    background:url(http://img850.imageshack.us/img850/2400/rowofstars.gif) repeat; 
    width:200%; 
    height:200%; 
    position:absolute; 
    top:0px; 
    left:0px; 
    z-index:-1; 
    -webkit-transform:rotate(-13deg) translate(10px,-220px); 
    -moz-transform:rotate(-13deg) translate(10px,-220px); 
    -o-transform:rotate(-13deg) translate(10px,-220px); 
    -ms-transform:rotate(-13deg) translate(10px,-220px); 
} 

.diagonal-background{ 
    overflow:hidden; 
} 

을하지만 그냥 쉬울 수 있습니다 배경 이미지를 만들 수 있습니다. 여기에 시도하는 몇 가지 리소스입니다 :

• http://www.stripegenerator.com/
• http://bgpatterns.com/