background-image으로 설정하고 싶지만 반복 사이의 특정 거리가 필요합니다.CSS, background-repeat distance
예를 들어, 나는 background-image 될이 이미지가 있습니다
을 그리고 나는이 같은 패턴으로 반복을 수정하려는 :
가 JSFiddle playground 확인
내가 찾고있는 CSS3 깨끗한 soluti JS, 추가 요소가 아닌 등등. 매우 현대적인 CSS3 (un-supported) 트릭을 사용해야한다면 괜찮습니다.
당신은
http://www.impressivewebs.com/space-round-css3-background/
는 모든 브라우저를 지원하는 배경 반복 (CSS3)에space 속성을 사용해야하고, 샘플 사진에 의해 유일한 세로 공간처럼 보인다.
더 나은 선택 실제 이미지 주변의 필요한 공간 내가 배가 거의 항해하고있다 생각하지만, 여전히이
(빈 영역 이미지를 패딩)을 가지고 배경 이미지 자체를 수정하는 것 솔루션은 데이터 URI를 기반으로합니다.
이미지보다 큰 크기의 이미지가 포함 된 SVG를 생성 할 수 있습니다 (예 : 여백을 이미지 폭 (40px)의 너비와 같게 만들고 여백을 60px = 100px로 지정)) :
다음 단계는 SVG의 내부에 이미지를 삽입한다 :
<image width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=" />
을 마지막으로 데이터 URI와 배경 이미지로이 SVG를 추가
#container {
width: 300px;
height: 100px;
border: 1px solid #ccc;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="40"><image width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=" /></svg>');
background-position: left center;
background-repeat: repeat-x;
}
업데이트 된 내용보기 Fiddle.
아주 크고 더러운 해결 방법이라고 할 수 있습니다. 그러나 이것은 추가 HTML 요소/JavaScript를 만들 필요가없는 순수 CSS 솔루션입니다. 여기에는 몇 가지 단점이 있습니다.
이러한 모든 문제에 대한 가능한 해결책은 CSS 전 처리기를 사용하는 것입니다. Sass. 당신은 당신이 여기에 많은 것을 추가 할 수 있습니다
@mixin background-image-spaced($width, $height, $margin-right, $image) {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="#{$width + $margin-right}" height="#{$height}"><image width="#{$width}" height="#{$height}" xlink:href="data:image/png;base64,#{$image}" /></svg>');
}
body {
@include background-image-spaced(40px, 40px, 60px, 'iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=');
}
믹스 인, 예컨대 :, 예를 들어, 만들 수 있습니다다른 모든 여백 값은 나침반을 사용하여 이미지를 수동으로 쓰는 대신 이미지를 인코딩하도록 인코딩 할 수 있습니다 (예 : 이 과정에 대한 자세한 내용은 this article을 참조하십시오. 이것은 이미 사용하기 편하고 더 편안하게 보입니다.
'background-repeat : space'는'text-align : justify'와 비슷합니다. 이미지 반복 사이의 공백을 요소의 크기로 조정하지만 사용자의 편의에 따라 공백을 정의 할 수는 없습니다. 이미지의 크기를 수정하는 것이 내 마음 속의 해결 방법이며, 누군가 다른 솔루션을 제공하는지 보자. – fguillen