이미지에 스타일을 적용하는 방법

Question

이 페이지에서 이미지 아래 div에 광택 효과가있는 이미지가 있습니다.

http://www.joelin.org/home2.html

나는 기본적으로 이미지의 상단에 광택 효과를 이동하려는. 나는 img 태그에 직접 스타일을 추가, 효과 2), 이미지 주위 사업부를 만들어 그 안에 광택 DIV 퍼팅을

1)을 시도하지 (그러나 광택 사업부는

) 이미지 아래 었죠

다른 어떤 생각?

Answer 1

달성하고자하는 것은 http://dabblet.com/gist/3610138입니까?

HTML :

<a href='#' class='img-wrapper'> 
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'> 
</a> 

CSS :

.img-wrapper, .img-wrapper img { 
    display: inline-block; 
    position: relative; 
    width: 13em; 
    height: 8em; 
    border-radius: 1em; 
} 
.img-wrapper:after { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    border-radius: 1em; 
    box-shadow: inset 0 1em 0 0 rgba(192, 192, 192, .5); 
    pointer-events: none; /* so that you can get image from right-click menu 
           won't work in IE and Opera */ 
    content: ''; 
} 

당신은 img 태그를 필요로하지 않으며, 당신은 다음 쉽게 도착, 배경 이미지로 이미지를 가지고 할 수 있습니다. 단지 하나 개의 원소 :

<div class='glossy'></div> 

단지이 CSS : 상대 위치 지정된 내부 래퍼 Z- 색인

.glossy { 
    width: 13em; 
    height: 8em; 
    border-radius: 1em; 
    background: linear-gradient(rgba(192, 192, 192, .5) 12.5%, transparent 12.5%), 
     radial-gradient(100% 100%, transparent 71%, rgba(192, 192, 192, .5) 71%) 
      no-repeat 0 1em, 
     radial-gradient(0% 100%, transparent 71%, rgba(192, 192, 192, .5) 71%) 
      no-repeat 100% 1em, 
     url(http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg); 
    background-size: 1px 100%, 1em 1em, 1em 1em, cover; 
} 

Answer 2

div의 절대 위치 지정을 사용하여 이미지 위에 배치 할 수 있습니다. 제대로 레이어하려면 z- 인덱스를 사용해야합니다. 다음과 같이 시도하십시오.

.imageClass 
{ 
    z-index: 1; 
} 

.glossyDiv 
{ 
    position: absolute; 
    top: 999px; 
    left: 999px; 
    z-index: 5; 
    /* you'll need to figure out where your image sits in relation to the 
    top and left of the screen, replace the 999s with the correct values */ 
} 

이미지 위에 div가 있어야합니다. div를 컨테이너와 관련된 위치에 배치하여 HTML 설정 방법을 변경할 수 있습니다.

z- 색인은 요소가 계층화/스택화되는 방식을 제어하므로 div를 높은 색인으로 설정하면 화면의 "전면"에 가까워지며 숫자가 작을수록 뒤쪽으로 설정됩니다. Z- 색인은 "배치 된"요소에만 적용됩니다. source