어떻게 div를 "끌 수 있습니까?"

div의 중간에 모양의 "구멍"(육각형처럼)이있는 배경 이미지 위에 중첩 된 반투명 색상의 div가있어서 "hole"을 통해 배경 이미지를 명확하게 볼 수 있습니다. . 누군가 CSS3로 가장 우아한 방법을 제안 할 수 있습니까? CSS3를 사용하여 육각형을 만들 수는 있지만 모양이 다른 div를 통해 "끌"하는 방법을 모르겠습니다.어떻게 div를 "끌 수 있습니까?"

출처

2014-04-04 KwiZ

SVG가 좋을 것입니다. – crush

check [이 질문에 대한 답변] (http://stackoverflow.com/questions/4344906/creating-a-hole-in-a-div-element) – sharshi

@sharshi 감사합니다. 그러나 적절한 답을 찾지 못했습니다. 저를 위해서. 내가 얻으려고하는 "구멍"은 복잡하고 동적 인 모양을 가지고있어서 공간의 나머지 부분을 채우거나 gif/png 이미지를 사용하지 못합니다. – KwiZ

하나 개있는 posibility 사용하여 CSS이는 육각형을 만들어

.test { 
    left: 0px; 
    top: 0px; 
    width: 400px; 
    height: 300px; 
    position: relative; 
    border: solid 1px black; 
    background-image: url(http://placekitten.com/500/400); 
    background-size: cover; 
} 


.test:after { 
    content: ""; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    background-image: linear-gradient(-60deg,transparent 60px, rgba(200,290,0,0.5) 51px), 
         linear-gradient(60deg,transparent 60px, rgba(200,290,0,0.5) 51px), 
         linear-gradient(120deg,transparent 60px, rgba(200,290,0,0.5) 51px), 
         linear-gradient(-120deg,transparent 60px, rgba(200,290,0,0.5) 51px), 
         linear-gradient(0deg,transparent 120px, rgba(200,290,0,0.5) 51px), 
         linear-gradient(180deg,transparent 120px, rgba(200,290,0,0.5) 51px); 
    background-size: 33% 50%, 33% 50%, 33% 50%, 33% 50%, 34% 50%, 34% 50%; 
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 0%, 50% 100%; 
    background-repeat: no-repeat; 
}

의사 요소 예를 들어

에서 여러 배경을 설정하는 것입니다 함께 : 여기 exmaple이다 노란 반투명 프레임

fiddle

출처

2014-04-04 16:13:06 vals

가 필요합니다. 그러나 내 필요는 이보다 훨씬 복잡하지만 솔루션은 매우 산뜻하고 내 필요에 맞게 조정하려고합니다. 고마워요! – KwiZ