다른 사람의 위에 위치하고 흐르지 않는 것

Question

나의 홈페이지에 나는 사용자가 선택할 수있는 그림의 슬라이드 쇼가있다. 나는 사용자가 이미지를 전혀 수정하지 않아도되도록하고 싶다.

http://homespun-at-heart.com/은 현재의 상태가 아니라는 점을 제외하면 예제입니다. 사용자가 이미지를 수정해야합니다.

내가하고 싶은 것은 콘텐츠 영역에 둥근 모서리가 나타나도록 이미지 위에 레이어가있는 div를 갖는 것입니다.

"둥근 모퉁이"div를 이미지 위에 밀지 않고 이미지 상단에 배치하려면 어떻게합니까?

Answer 1

위에서 div의 css3 border-radius 속성으로이 작업을 수행 할 수 있지만 모든 브라우저에서 지원되지는 않습니다. 이미지 기반 솔루션의 경우, 뭔가 같은 :

HTML

<div id="container"> 
    <div id="image"><img src="blah.jpg" /></div> 
    <div id="round"> 
    <img id="topLeftRound" src="leftRound.png" /> 
    <img id="bottomRightRound" src="rightRound.png" /> 
    </div> 
</div> 

CSS 나는 당신이 당신의 좌상 및 bottomRight 이미지로 원하는 것을 추측 할 수 있으리라 믿고있어

#container{ 
    position:relative 
    } 
    #image{ 
    position:absolute; 
    top:0;left:0; 
    height:100%; 
    z-index:10; 
    } 
    #round{ 
    position:absolute; 
    top:0;left:0; 
    height:100%; 
    z-index:20; 
    } 
    #topLeftRound{ 
     position:absolute; 
     width:10px;height:10px /* or whatever */ 
     top:0;left:0; 
    } 
    #bottomRightRound{ 
     position:absolute; 
     width:10px;height:10px /* or whatever */ 
     bottom:0;right:0; 
} 

... 그냥 그 구석의 둥근 부분.

나는 그것이 당신이 찾고있는 것이라고 생각하니?

Answer 2

너비가 같고 높이가 다른 div가 하나있을 수 있습니다. 하단 사진은 실제 사진에 사용되고, 즉 배경 이미지는 사진이됩니다. 내부

<div id="slideshow"><div id="slideshow_border"></div></div> 

또는 (아마도 더 나은), 당신은 배경으로 이미지와 외부 사업부를 가질 수, 두 개의 div의 : 그리고 상단 하나가 바로이 개 둥근 모서리입니다, 투명성과 배경 이미지를 가지고 , 하나는 왼쪽으로, 다른 하나는 별도의 투명 테두리 이미지로 떠올랐다. 즉, 웹 사이트를 탐색하는 사람은 불필요한 여분의 픽셀을 다운로드 할 필요가 없습니다.

<div id="slideshow"> 
<div class="border left"></div> 
<div class="border right"></div> 
</div> 

그리고 CSS :

#slideshow { 
width: 400px; height: 400px; 
background-image: url(images/slideshow1.png); 
} 
#slideshow .border { 
width: 50px; height: 50px; 
} 
#slideshow .border.left { 
float: left; 
background-image: url(images/border-left.gif); 
} 
#slideshow .border.right { 
float: right; 
margin-top: 350px; 
background-image: url(images/border-right.gif); 
} 

난 그냥 CSS에 임의의 값을 사용했다.

Answer 3

사이트에서 jquery를 사용하십니까? 그렇게 할 경우이 플러그인을 사용하여 dom 요소에 둥근 모서리를 생성 할 수 있습니다. www.jquery.malsup.com/corner/ 또는 www.dillerdesign.com/experiment/DD_roundies/입니다. 둘 다 잘 작동하며 IE6을 포함한 모든 브라우저를 지원합니다. 필요한 경우 IE6을 감지하려면 http://api.jquery.com/jQuery.browser/에서이 플러그를 사용할 수 있습니다.

Answer 4

CSS3의 border-radius 속성을 사용하면 매우 쉽게이 작업을 수행 할 수 있으며 오버레이는 div 또는 아무것도 필요하지 않습니다. IE8 이하에서는 작동하지 않지만 Webkit 및 Firefox에서 작동합니다.

#slideshow img { 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
}