CSS의 PNG 이미지에 대한 그림자 삭제

CSS의 PNG 이미지에 대한 그림자 삭제

저는 자유로운 형태(사각형이 아닌)의 PNG 이미지를 가지고 있습니다.

이 이미지에 드롭섀도 효과를 적용해야 합니다.

표준 접근 방식은...

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

사각형처럼 이 이미지에 대한 그림자를 표시합니다.그래서, 저는 제 이미지와 사각형 그림자를 봅니다. 그것은 물체의 형태를 따르지 않고, 이미지에 표시됩니다.

그것을 제대로 할 수 있는 방법이 있습니까?

예, CSS 또는 인라인을 사용하여 가능합니다.

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

파티에 조금 늦었지만, 네, IE용 드롭섀도 필터(웹킷용), SVG(파이어폭스용) 및 DX 필터를 조합하여 알파 마스크된 PNG 주변에 "진정한" 동적 드롭섀도를 만드는 것이 완전히 가능합니다.

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

실제 드롭섀도우와 박스섀도우를 비교한 것과 제가 방금 설명한 기술에 대한 기사입니다.

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

그것은 저에게 아주 효과적이었습니다.IE에서 한 가지 주의할 점은 전체 색상(#2222)이 필요한 세 글자가 작동하지 않습니다.

그림자를 드리우고 싶은 이미지가 100개 이상인 경우에는 명령줄 프로그램 ImageMagick을 사용하는 것이 좋습니다.이것으로, 여러분은 하나의 명령을 입력하는 것만으로 100개의 이미지에 모양의 드롭 그림자를 적용할 수 있습니다!예:

for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done

위 (shell) 명령은 현재 디렉터리에 있는 각 .png 파일을 가져와서 드롭 섀도를 적용하고 결과를 섀도/디렉토리에 저장합니다.생성된 그림자가 마음에 들지 않으면 매개 변수를 많이 조정할 수 있습니다. 먼저 그림자에 대한 설명서를 참조하십시오. 일반적인 사용 지침에는 이미지에 수행할 수 있는 여러 가지 멋진 예가 있습니다.

만약 당신이 미래에 드롭 섀도우의 모양에 대해 마음을 바꾼다면 - 그것은 단지 다른 파라미터로 새로운 이미지를 생성하는 하나의 명령일 뿐입니다 :-)

더들리가 답변에서 언급했듯이, 이것은 웹킷용 드롭섀도우 CSS 필터, 파이어폭스용 SVG 및 Internet Explorer 9-용 DirectX 필터로 가능합니다.

한 단계 더 나아가 SVG를 인라인화하여 추가 요청을 제거합니다.

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

이미지에 둥근 모서리가 있더라도 기본적으로 그림자가 블록 테두리에 적용되므로 클래스에 반지름이 있는 테두리를 추가합니다.

border-radius: 4px;

이미지 모서리에 따라 테두리 반지름을 변경합니다.도움이 되길 바랍니다.

다음을 추가합니다.

-webkit-filter: drop-shadow(5px 5px 5px #fff);
 filter: drop-shadow(5px 5px 5px #fff); 

예:

<img class="home-tab-item-img" src="img/search.png"> 

.home-tab-item-img{
    -webkit-filter: drop-shadow(5px 5px 5px #fff);
     filter: drop-shadow(5px 5px 5px #fff); 
}

다음은 준비된 예열 호버 애니메이션 코드 조각입니다.

http://codepen.io/widhi_allan/pen/ltaCq

-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));

제가 처음에 이것을 게시했을 때는 불가능했기 때문에 이것이 해결책입니다.이제 다른 답변을 사용하는 것을 제안합니다.

이미지의 윤곽을 정확하게 파악할 수 있는 방법은 없지만 중앙에 있는 이미지 뒤에 있는 div로 위장할 수 있습니다.

만약 제 속임수가 먹히지 않는다면, 여러분은 이미지를 잘라서 모든 작은 이미지에 대해 그것을 해야 합니다.(이미지가 많을수록 그림자가 더 정확하게 표시됩니다) 그러나 대부분의 이미지의 경우 한 번의 img만으로도 괜찮아 보입니다.

당신이 해야 할 일은 그렇게 당신의 img 주위에 랩 디브를 두는 것입니다.

<div id="imgWrap">
    <img id="img" scr="imgLocation">
</div>

그런 다음 랩 안에 빈 칸막이를 넣습니다(이것이 그림자 역할을 할 것입니다).

<div id="imgWrap">
    <div id="shadow"> </div>
    <img id="img" scr="imgLocation">
</div>

그런 다음 CSS를 사용하여 img 뒤에 그림자가 나타나도록 해야 합니다.

#img {
    z-index: 1;
}

#shadow {
    z-index: 0; /*make this value negative if doesnt work*/
    box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
    width: 0;
    height: 0;
}

이제 imgWrap을 원래 img의 위치에 배치합니다.img의 그림자 중심을 맞추려면 상자 모양의 처음 두 값을 음으로 만들 수 있습니다.또는 절대적으로 img의 위쪽 및 왼쪽 값 = 0, 그림자 div 값 = img 너비 및 높이의 절반을 각각 지정할 수 있습니다.

만약 이것이 끔찍하게 보인다면, 당신의 img를 자르고 다시 시도하세요.

(만약 당신이 윤곽선에만 img 뒤의 그림자를 원하지 않는다면, 당신은 img를 불투명하게 만들고 그것이 그렇게 어렵지 않은 투명한 것처럼 행동해야 하며 당신은 코멘트를 할 수 있고 제가 나중에 설명하겠습니다.)

제 경우에는 다양한 모양과 투명도의 PNG 이미지를 사용하여 최신 모바일 브라우저에서 작동해야 했습니다.이미지 복제를 사용하여 드롭 섀도우를 만들었습니다.그건 내게 두 개가 있다는 것을 의미합니다.img이미지의 중 가 다른 것(동한이의요소, 하는다사위있하음에나른용지미나일사▁of있▁elements(음,위에using,용하나▁image소▁the▁same요▁one▁of▁top▁the▁onposition: absolute), 과 같은

.image-shadow {
  filter: blur(10px) brightness(-100);
  -webkit-filter: blur(10px) brightness(-100);
  opacity: .5;
}

여기에는 하단 이미지를 어둡게 하기 위한 밝기 필터와 음영이 일반적으로 가지고 있는 흐림 효과를 내기 위한 흐림 필터가 포함됩니다.그런 다음 50%의 불투명도를 적용하여 부드럽게 합니다.

이 기능은 다음을 사용하여 브라우저 간에 적용할 수 있습니다.moz그리고.ms깃발

예: https://jsfiddle.net/5mLssm7o/

임의의 모양의 드롭 섀도우에 사용할 수 있는 제안된 기능이 있습니다.Lea Verou의 도움으로 여기서 보실 수 있습니다.

http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom

그러나 브라우저 지원은 미미합니다.

이것은 CSS에서는 불가능합니다. 이미지는 사각형이므로 그림자는 사각형의 그림자가 됩니다.가장 쉬운 방법은 포토샵/김프 또는 다른 이미지 편집기를 사용하여 코어 드로잉과 같은 그림자를 적용하는 것입니다.

"약간" 그림자가 필요할 때 자주 사용하는 방법(윤곽선은 초정밀이 아니어야 함)은 방사형 채우기가 100% 검은색에서 100% 투명한 DIV를 이미지 아래에 배치하는 것입니다.DIV의 CSS는 다음과 같습니다.

.shadow320x320{    
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }

이렇게 하면 320x320 DIV에서 원형 검은색 페이드아웃 '점'이 생성됩니다.DIV의 높이 또는 너비를 조정하면 해당 타원이 표시됩니다.병이나 다른 원통형 모양 아래에 계란 그림자를 만들기에 매우 좋습니다.

여기에 CSS 그레이디언트를 생성할 수 있는 절대적으로 믿을 수 없고 매우 우수한 도구가 있습니다.

http://www.colorzilla.com/gradient-editor/

ps: 사용할 때는 예의 광고 클릭을 하세요. (그리고, 아니요, 저는 그것에 소속되어 있지 않습니다.)그러나 예의 클릭은 약간의 습관이 되어야 합니다. 특히 자주 사용하는 도구의 경우에는...그냥 말해봐요...우리 모두가 인터넷에서 일하고 있기 때문에...)

아마도 당신은 이것을 찾고 있을 것입니다.http://lineandpixel.com/blog/png-shadow

img { png-shadow: 5px 5px 5px #222; }

모든 브라우저에서 이 작업을 안정적으로 수행할 수는 없습니다.Microsoft는 IE10+ 이후로 DX 필터를 더 이상 지원하지 않으므로 다음과 같은 모든 솔루션이 제대로 작동하지 않습니다.

https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx

모든 브라우저에서 안정적으로 작동하는 유일한 속성은box-shadow그러면 요소(예: div)에 경계가 배치되어 사각형 경계가 생성됩니다.

박스 그림자: 수평 오프셋 수직 오프셋 블러 거리 확산 거리 색상 삽입;

예.

box-shadow: -2px 6px 12px 6px #CCCED0;

사각형이지만 모서리가 균일하게 둥근 이미지가 있는 경우 드롭 섀도우는border-radius그래서 당신은 항상 당신의 div에서 당신의 이미지의 둥근 모서리를 모방할 수 있습니다.

다은다같은음다문음니서입과▁document▁microsoft에 대한 입니다.box-shadow:

https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx

언급URL : https://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css