모방 css border-image-outset : 투명 배경에 둥근 모서리 이미지가 너무 커서 테두리로 정의 할 수 없습니다.

웹을 검색 할 때 내 문제의 해결책은 CSS3 속성 border-image-outset 인 것으로 보입니다. 아직 어떤 브라우저도 구현하지 않았기 때문에 누군가 다른 해결책을 도울 수 있기를 바랍니다. 미리 감사드립니다.모방 css border-image-outset : 투명 배경에 둥근 모서리 이미지가 너무 커서 테두리로 정의 할 수 없습니다.

This is the layout 내가 html/css로 번역 한 친구가 설계되었습니다.

문제는 콘텐츠 영역입니다. 콘텐츠 영역의 너비가 고정되어 있으며, 높이는 콘텐츠에 따라 다릅니다. 중간 크기로 전체 폭에 걸쳐 1px의 높은 배경 이미지, 평소와 같이 비즈니스가 반복됩니다. 하지만 투명 배경에 멋진 코너가있어 컨텐츠 영역 위 (아래 및 아래)에 너무 높습니다. (그리고 완성을 위해 이러한 모서리 사이의 다른 위아래 이미지가 있지만 여러 배경 이미지가 있으면 더 이상 문제가되지 않습니다.)

따라서 내용 영역을 반복 배경으로 채우려면 어떻게해야합니까? 모퉁이 뒤에 보이지 않고?

나는 내 문제를 설명하기 위해 몇 가지 예를 준비했습니다. 대부분의 스타일과 이미지는 물론 아직 없습니다. 1px 패딩/테두리는 더 나은 가시성을 제공합니다.

처음에는 머리글 하나와 바닥 글 이미지만으로 간단한 접근 방식을 시도했습니다. 하지만 머리글과 바닥 글 이미지와 원하는 높이를 유지하는 페이지가 겹치도록 내용을 가져올 수 없습니다 ... open : http://test.illusionet.ch/jg/simple.html

그런 다음 그림을 약 100 개로 자릅니다. 서브 네비게이션 아래의 왼쪽에는 단 하나의 작은 조각이 없습니다. -하지만 전과 같이 붙어 있습니다. open : http://test.illusionet.ch/jg/pieces.html

다른 기술을 사용해 보았습니다. 나는 마크 업이 지금까지 엉망이되었음을 알고있다. 무시하세요. 또는 처음부터 다시 쓸 수 있습니다.

<div class="rechteSpalte">...</div> 
<div class="mittlereSpalte">...</div>

가 I'v이 두 번째 예제와 fiddle 준비와 함께 연주하고 의견을 시도 : 아직로서 주어진 유일한 것은 순서와 두 된 div의 동네입니다.

출처

2011-08-04 Sarah

@Jonah의 입력으로 인해 코드를 수정할 수있었습니다.

여기에서 라이브를 볼 수 있습니다 http://test.illusionet.ch/jg/zindex.html

을 여분 된 div가 필요합니다, 당신은 #content의 단락에서 직접 음의 여백을하지 않으려면.

<html> 
<head> 
<style> 
    body { 
     background: darkgreen; 
    } 
    #top { 
     background: url(http://test.illusionet.ch/jg/greengrass/img/header.png) no-repeat center top; 
     height: 500px; 
     margin: 0 auto; 
     position: relative; 
     width: 982px; 
     z-index: 10; 
    } 
    #footer { 
     background: url(http://test.illusionet.ch/jg/greengrass/img/bigfoot.png) no-repeat center bottom; 
     height: 322px; 
     margin: 0 auto; 
     position: relative; 
     width: 982px; 
     z-index: 10; 
    } 
    #main { 
     margin: 0 auto; 
     width: 982px; 
     background: yellow url(http://test.illusionet.ch/jg/greengrass/img/page.png) repeat-y right top; 
     position: relative; 
     z-index: 20; 
     min-height: 100px; 
    } 
    #content { 
     margin-top: -250px; 
    } 
    .clear { 
     clear: both; 
    } 
    .neg_margin_hook { 
     height: 1px; 
    } 
    .neg_margin_bottom { 
     margin-bottom: -200px; 
    } 
    #content p { 
     float: right; 
     width: 30%; 
     padding-right: 3%; 
    } 
    .left { 
     margin-top:100px; 
    } 
</style> 
</head> 
<body> 
    <div id="top"> 
    </div> 
    <div id="main"> 
     <div class="neg_margin_hook"> 
     </div> 
     <div id="content"> 
      <p class="right">Cras mattis consectetur purus sit amet fermentum. </p> 
      <p class="center">the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.</p> 
      <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
      <div class="clear neg_margin_bottom"> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
    </div> 
</body> 
<html>

출처

2011-09-11 12:11:45 Sarah

상단 조각과 바닥 글을 분리하는 것 외에는 배경을 자르지 않고이 작업을 수행 할 수 있어야합니다. 보라색 배경 최상위 종이 배경이 될 것

http://pastehtml.com/view/b4lfcizr6.html

참고 : 여기에

내가 쉽게 적응할 수 있다고 생각 솔루션입니다. 노란색 부분은 반복되는 배경을가집니다. 텍스트가 원하는대로 커질 것입니다.

EDIT : 콘텐츠 레이어의 텍스트 (p 태그)의 Z- 인덱스가 가장 높지만 상단 영역의 텍스트가 포함 된 요소보다 높은 z- 색인을 갖는 것이 트릭입니다 반복 배경이 있습니다.

출처

2011-08-21 10:41:10 Jonah

모방 css border-image-outset : 투명 배경에 둥근 모서리 이미지가 너무 커서 테두리로 정의 할 수 없습니다.

답변

관련 문제