CSS : 질감이있는 배경 만들기

Question

현재 충분한 속도로로드 될 내 사이트의 이미지 배경을 설정하는 데 어려움을 겪고 있습니다. 나는 데이터 URL 이미지와 이미지를 사용했지만 backgournd 이미지가 여전히 크기 때문에 페이지를로드 할 때 오랜 시간이 걸린다. CSS를 사용하여 아래 그림과 같은 질감의 배경색을 만들 수 있습니까? 여기에 내가 그것을 시도하고이 일치 할 수없는 'EXAMPLE

입니다 :

Answer 1

최신 CSS3 기술로, 질감 배경을 만들 수 있습니다. 이것을 확인하십시오 : http://lea.verou.me/css3patterns/#

그러나 여전히 많은면에서 제한되어 있습니다. 그리고 브라우저 지원도 그렇게 준비가되어 있지 않습니다.

가장 좋은 방법은 작은 텍스처 이미지를 사용하고 그 배경을 반복하는 것입니다. 당신은 몇 가지 좋은 준비가 여기에 텍스처 이미지를 사용하여 얻을 수 :

http://subtlepatterns.com

Answer 2

당신은 가능하면 반복 될 수있는 작은 조각으로 이미지를 슬라이스 시도해야합니다. 나는 그 이미지를 101x101px 이미지로 잘라 냈다.

CSS :

body{ 
    background-image: url(SO_texture_bg.jpg); 
    background-repeat:repeat; 
} 

그러나 어떤 경우에, 우리는 작은 하나에 이미지를 슬라이스 할 수 없을 것

. 이 경우 전체 이미지를 사용합니다. 그러나 Mustafa Kamal이 언급 한 것과 같은 CSS3 방법을 사용할 수도 있습니다.

행운을 빈다.

Answer 3

이미지 base-64 변환기를 검색하는 경우 일부 작은 이미지 텍스처 파일을 @import url('') 코드 섹션에 코드로 포함 할 수 있습니다. 그것은 많은 코드처럼 보일 것입니다; 이미지를로드하기 위해 별도의 리소스를 호출하지 않아도 적어도 이제는 모든 데이터가 로컬에 저장됩니다.

예 링크는 :

: http://www.base64-image.de/

내가 PNG 형식의 간단한 아이콘의 내 자신의 목록에서 파일을 가지고 가고, BASE-64로 변환, 내 CSS에서 다음과 같습니다

url('data:image/png;base64,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') 

텍스처 이미지를 사용하면 비슷한 프로세스를 사용하는 것이 좋습니다.

Answer 4

이미지 편집기를 사용하여 배경의 일부분을 잘라낸 다음 CSS의 background-repeat 속성을 적용하여 작은 이미지가 사용되는 영역을 채우도록 만듭니다.

경우에 따라 background-repeat은 이미지가 반복되는 이음새를 만듭니다. 해결 방법은 다음과 같은 이미지 편집기를 사용하는 것입니다. 배경 이미지로 시작하여 이미지를 복사하고 복사를 왼쪽에서 오른쪽으로 대칭 이동 (회전하지 않음) 한 다음 원래의 오른쪽 가장자리에 붙여 넣습니다 . 결합 된 이미지의 오른쪽 가장자리에서 1 픽셀을 제거하려면 잘라냅니다. 이제 세로에 대해 반복합니다. 결합 된 이미지를 복사하고 위에서 아래로 사본을 뒤집어 결합 된 겹치는 한 픽셀 아래쪽에 붙여 넣습니다. 자르기는 바닥에서 1 픽셀을 제거합니다. 결과 이미지에 솔기가 생기지 않아야합니다.