CSS3에서는 이미지에서 박스 샤 두 및 국경-방사기를 직접 사용하여 브라우저를 잘 렌더링 할 수 없습니다. 그러나 이미지를 백그라운드 이미지로 사용하면 추가 된 스타일 브라우저가 잘 렌더링 될 수 있습니다. Box-Shadow, Border-Radius 및 Transition을 사용하여 다른 이미지 스타일 효과를 만드는 방법을 설명하겠습니다.
질문데모를 살펴보면 이미지의 첫 번째 줄을 위해 Border-Radius 및 Embedded Box Shadow를 설정하는 것을 알았습니다. Firefox는 이미지의 경계-라디우스를 렌더링하지만 임베디드 박스 섀도우를 렌더링하지는 않습니다. 크롬이나 사파리 효과는 렌더링되지 않습니다.
. 정상 IMG {
국경 : 솔리드 5px #000;
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
-webkit-box-shadow : 삽입 0 1px 5px rgba (0,0,0, .5);
-moz-box-shadow : 삽입 0 1px 5px rgba (0,0,0, .5);
Box-Shadow : inset 0 1px 5px rgba (0,0,0, .5);
}
Firefox 효과 :크롬/사파리
해결 방법Border-Radius 및 Embedded Box Shadow가 제대로 작동하려면 이미지를 백그라운드 이미지로 변환해야합니다.
동적 방법이 작업을 동적으로 수행하려면 jQuery를 사용하여 각 이미지를 감싸기 위해 배경 이미지를 추가해야합니다. 다음 JS 코드는 각 이미지에 대한 스팬 래퍼를 추가하고 스팬의 배경 이미지 경로는 이미지 경로입니다.
코드는 비교적 간단합니다. 설명 할 필요가 없다고 생각합니다. 모르는 경우 jQuery API를 직접 확인할 수 있습니다.
<script type = "text/javaScript"src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
<script type = "text/javaScript">
$ (document) .ready (function () {
$ ( "img"). load (function () {
$ (this) .wrap (function () {
return '<span style = "위치 : 상대; 디스플레이 : 인라인-블록; 배경 : url (' + $ (this) .attr ( 'src') + ') no-Repeat center; 너비 :' + $ (this) .width () + 'px; 높이 :' + $ (this) .Height () + 'px;" /> ';
});
$ (this) .css ( "불투명도", "0");
});
});
</스크립트>
산출
위의 코드는 다음 결과를 출력합니다.
<span style = "위치 : 상대; 디스플레이 : 인라인-블록; 배경 : URL (image.jpg) 비 반복 센터 센터; 너비 : 150px; 높이 : 150px;">
<img src = "image.jpg"style = "불투명도 : 0;">
</span>
원형 그림ADD 우리는 Porder-Radius를 사용하여 원형 그림의 효과를 달성합니다. 그 효과는 다음과 같습니다.
CSS :
.circle .Image-wrap {
-webkit-border-radius : 50em;
-Moz-Border-Radius : 50EM;
Border-Radius : 50em;
}
카드 스타일아래는 여러 내장 된 박스 샤이더를 사용하는 카드 스타일 이미지입니다.
CSS :
.card .Image-wrap {
-webkit-box-shadow : 삽입 0 1px rgba (0,0,0, .8), 삽입 0 2px 0 RGBA (255,255,255, .5), 삽입 0 -1px 0 RGBA (0,0,0, .4);
-Moz-Box-Shadow : 삽입 0 1px RGBA (0,0,0, .8), 삽입 0 2PX 0 RGBA (255,255,255, .5), 삽입 0 -1PX 0 RGBA (0,0,0, .4);
Box -Shadow : 삽입 0 1px rgba (0,0,0, .8), 삽입 0 2PX 0 RGBA (255,255,255, .5), 삽입 0 -1px 0 RGBA (0,0,0, .4);
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
}
구호 스타일아래는 구호 효과입니다.
CSS :
.embossed .image-wrap {
-webkit -box -shadow : 삽입 0 0 2PX RGBA (0,0,0, .8), 삽입 0 2PX 0 RGBA (255,255,255, .5), 삽입 0 -7PX 0 RGBA (0,0,0, .6), 삽입 0 -9PX 0 RGBA (255,255,255, .3);
-Moz -Box -Shadow : 삽입 0 0 2PX RGBA (0,0,0, .8), 삽입 0 2PX 0 RGBA (255,255,255, .5), 삽입 0 -7PX 0 RGBA (0,0,0, .6), 삽입 0 -9PX 0 RGBA (255,255,2555, .3);
Box -Shadow : 삽입 0 0 2PX RGBA (0,0,0, .8), 삽입 0 2PX 0 RGBA (255,255,255, .5), 삽입 0 -7PX 0 RGBA (0,0,0, .6), 삽입 0 -9PX 0 RGBA (255,255,255, .3);
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
}
유연한 구호 스타일엠보싱 스타일과 비교하여 새로운 스타일은 1px 블러 속성을 추가합니다.
CSS :
.soft-embossed .image-wrap {
-webkit -box -shadow : 삽입 0 0 4px RGBA (0,0,0,1), 삽입 0 2PX 1PX RGBA (255,255,255, .5), 삽입 0 -9PX 2PX RGBA (0,0,0, .6), 삽입 0-12PX 2PX RGBA (255,2555, .3);
-Moz -Box -Shadow : 삽입 0 4PX RGBA (0,0,0,1), 삽입 0 2PX 1PX RGBA (255,255,255, .5), 삽입 0 -9PX 2PX RGBA (0,0,0,0, .6), 삽입 0-12PX RGBA (255,25,2555, .3);
Box -Shadow : 삽입 0 4px RGBA (0,0,0,1), 삽입 0 2PX 1PX RGBA (255,255,255, .5), 삽입 0 -9PX 2PX RGBA (0,0,0, .6), 삽입 0 -12PX 2PX RGBA (255,255,255, .3);
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
}
컷 아웃 스타일임베디드 박스 섀도우를 사용하여 컷 아웃 효과를 얻으십시오.
CSS :
.cut-out .Image-wrap {
-webkit-box-shadow : 0 1px 0 RGBA (255,255,255, .2), 삽입 0 4PX 5PX RGBA (0,0,0, .6), 삽입 0 1PX 0 RGBA (0,0,0, .6);
-Moz-Box-Shadow : 0 1PX 0 RGBA (255,255,255, .2), 삽입 0 4PX 5PX RGBA (0,0,0, .6), 삽입 0 1PX 0 RGBA (0,0,0, .6);
Box-Shadow : 0 1PX 0 RGBA (255,255,255, .2), 삽입 0 4PX 5PX RGBA (0,0,0, .6), 삽입 0 1PX 0 RGBA (0,0,0, .6);
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
}
변형과 빛이 예에서는 이미지 포장에 전환 속성을 추가합니다. 마우스가 미끄러지면 둥근 모서리에서 둥근 모양으로 변경됩니다. 그런 다음 여러 상자 섀도를 사용하여 빛나는 효과를 얻습니다.
CSS :
.morphing-growing .image-wrap {
-webkit-transition : 1s;
-모조 전환 : 1s;
전환 : 1s;
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
}
.morphing-glowing .image-wrap : 호버 {
-webkit-box-shadow : 0 0 20px rgba (255,255,255, .6), 삽입 0 0 20px RGBA (255,255,255,1);
-Moz-Box-Shadow : 0 0 20px RGBA (255,255,255, .6), 삽입 0 20PX RGBA (255,255,255,1);
Box-Shadow : 0 0 20PX RGBA (255,255,255, .6), 삽입 0 20px RGBA (255,255,255,1);
-webkit-border-radius : 60em;
-Moz-Border-Radius : 60EM;
Border-Radius : 60em;
}
강조 효과하이라이트 효과는 다음을 추가하여 다음을 추가하여 달성됩니다.
CSS :
.Glossy .image-wrap {
-webkit-box-shadow : inset 0 -1px 0 RGBA (0,0,0, .5);
-moz-box-shadow : 삽입 0 -1px 0 RGBA (0,0,0, .5);
Box -Shadow : inset 0 -1px 0 RGBA (0,0,0, .5);
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
}
.glossy .image-wrap : {이후 {
위치 : 절대;
콘텐츠: ' ';
너비 : 100%;
높이 : 50%;
상단 : 0;
왼쪽 : 0;
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
배경 : -Moz-linear-gradient (상단, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);
배경 : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 컬러 스톱 (0%, RGBA (255,255,255,0.7)), 컬러 스톱 (100%, RGBA (255,255,255, .1));
배경 : 선형 등급 (상단, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);
}
반사 효과이 예에서는 반사 효과를 달성하기 위해 하이라이트를 바닥으로 이동합니다.
CSS :
.reflection .Image-wrap : {이후 {
위치 : 절대;
콘텐츠: ' ';
너비 : 100%;
높이 : 30px;
하단 : -31px;
왼쪽 : 0;
-webkit 주역-왼쪽-라디우스 : 20px;
-webkit-border-top-radius : 20px;
-Moz 국경 Radius-topleft : 20px;
-Moz 국경 Radius-topright : 20px;
경계 왼쪽-라디우스 : 20px;
국경-오른쪽 라디우스 : 20px;
배경 : -Moz-linear-gradient (상단, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);
배경 : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 컬러 스톱 (0%, RGBA (0,0,0, .3)), 컬러 스톱 (100%, RGBA (255,255,255,0));
배경 : 선형 등급 (상단, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);
}
.reflection .image-wrap : 호버 {
위치 : 상대;
상단 : -8px;
}
하이라이트와 반성이 예에서 우리는 다음을 사용합니다. 이전 및 : 후에 하이라이트와 반사 효과를 결합합니다.
CSS :
.Glossy-reflection .image-wrap {
-webkit-box-shadow : 삽입 0 -1px 0 RGBA (0,0,0, .5), 삽입 0 1PX 0 RGBA (255,255,255, .6);
-Moz-Box-Shadow : 삽입 0 -1px 0 RGBA (0,0,0, .5), 삽입 0 1px 0 RGBA (255,255,255, .6);
Box -Shadow : inset 0 -1px 0 RGBA (0,0,0, .5), 삽입 0 1PX 0 RGBA (255,255,255, .6);
-webkit-transition : 1s;
-모조 전환 : 1s;
전환 : 1s;
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
}
.Glossy-reflection .Image-wrap : 이전 {
위치 : 절대;
콘텐츠: ' ';
너비 : 100%;
높이 : 50%;
상단 : 0;
왼쪽 : 0;
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
배경 : -Moz-linear-gradient (상단, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);
배경 : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 컬러 스톱 (0%, RGBA (255,255,255,0.7)), 컬러 스톱 (100%, RGBA (255,255,255, .1));
배경 : 선형 등급 (상단, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);
}
.Glossy-reflection .Image-wrap : {이후 {
위치 : 절대;
콘텐츠: ' ';
너비 : 100%;
높이 : 30px;
하단 : -31px;
왼쪽 : 0;
-webkit 주역-왼쪽-라디우스 : 20px;
-webkit-border-top-radius : 20px;
-Moz 국경 Radius-topleft : 20px;
-Moz 국경 Radius-topright : 20px;
경계 왼쪽-라디우스 : 20px;
국경-오른쪽 라디우스 : 20px;
배경 : -Moz-linear-gradient (상단, RGBA (230,230,230, .3) 0%, RGBA (230,230,230,0) 100%);
배경 : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 컬러 스톱 (0%, RGBA (230,230,230, .3)), 컬러 스톱 (100%, RGBA (230,230,230,0));
배경 : 선형 등급 (상단, RGBA (230,230,230, .3) 0%, RGBA (230,230,230,0) 100%);
}
테이프 스타일이 예에서는 테이프의 효과를 달성하기 위해 사용합니다.
CSS :
.tape .Image-wrap {
-webkit-box-shadow : 삽입 0 0 2PX RGBA (0,0,0, .7), 삽입 0 2PX 0 RGBA (255,255,255, .3), 삽입 0 -1PX 0 RGBA (0,0,0, .5), 0 1PX 3PX RGBA (0,0,0, .4);
-Moz-Box-Shadow : 삽입 0 0 2PX RGBA (0,0,0, .7), 삽입 0 2PX 0 RGBA (255,255,255, .3), 삽입 0 -1PX 0 RGBA (0,0,0, .5), 0 1PX 3PX RGBA (0,0,0, .4);
Box -Shadow : 삽입 0 0 2PX RGBA (0,0,0, .7), 삽입 0 2PX 0 RGBA (255,255,255, .3), 삽입 0 -1PX 0 RGBA (0,0,0, .5), 0 1PX 3PX RGBA (0,0,0, .4);
}
.tape .Image-wrap : {이후 {
위치 : 절대;
콘텐츠: ' ';
너비 : 60px;
높이 : 25px;
상단 : -10px;
왼쪽 : 50%;
마진 왼쪽 : -30px;
국경 : 고체 1px RGBA (137,130,48, .2);
배경 : -Moz-linear-gradient (상단, RGBA (254,243,127, .6) 0%, RGBA (240,224,54, .6) 100%);
배경 : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 컬러 스톱 (0%, RGBA (254,243,127, .6)), 컬러 스톱 (100%, RGBA (240,224,54, .6));
배경 : 선형 등급 (상단, RGBA (254,243,127, .6) 0%, RGBA (240,224,54, .6) 100%);
-webkit-box-shadow : 삽입 0 1px 0 RGBA (255,255,255, .3), 0 1px 0 RGBA (0,0,0, .2);
}
변형 및 채색이 예에서, 우리는 다음을 사용합니다. 요소에 마우스가 통과 될 때 방사상 구배의 효과를 달성하기 위해 요소를 사용합니다.
CSS :
.morphing-tinting .image-wrap {
위치 : 상대;
-webkit-transition : 1s;
-모조 전환 : 1s;
전환 : 1s;
-webkit-border-radius : 20px;
-Moz 국경 Radius : 20px;
Border-Radius : 20px;
}
.morphing-tinting .image-wrap : 호버 {
-webkit-border-radius : 30em;
-Moz 국경-라디우스 : 30em;
Border-Radius : 30em;
}
.morphing-tinting .image-wrap : {이후 {
위치 : 절대;
콘텐츠: ' ';
너비 : 100%;
높이 : 100%;
상단 : 0;
왼쪽 : 0;
-webkit-transition : 1s;
-모조 전환 : 1s;
전환 : 1s;
-webkit-border-radius : 30em;
-Moz 국경-라디우스 : 30em;
Border-Radius : 30em;
}
.morphing-tinting .Image-wrap : 호버 : {이후 {
배경 : -webkit -gradient (방사형, 50% 50%, 40, 50% 50%, 80, (RGBA (0,0,0,0)), (RGBA (0,0,0,1)));
배경 : -Moz-Radial-Gradient (50% 50%, Circle, RGBA (0,0,0,0) 40px, RGBA (0,0,0,1) 80px);
}
깃털 가장자리 둥근또한 방사형 구배를 사용하여 마스크를 생성하여 깃털 효과를 달성 할 수 있습니다.
CSS :
.feather .Image-wrap {
위치 : 상대;
-webkit-border-radius : 30em;
-Moz 국경-라디우스 : 30em;
Border-Radius : 30em;
}
.feather .Image-wrap : {이후 {
위치 : 절대;
콘텐츠: ' ';
너비 : 100%;
높이 : 100%;
상단 : 0;
왼쪽 : 0;
배경 : -webkit -gradient (방사형, 50% 50%, 50, 50% 50%, 70, (RGBA (255,255,255,0)), (RGBA (255,255,255,1));
배경 : -Moz-Radial-Gradient (50% 50%, Circle, RGBA (255,255,255,0) 50px, RGBA (255,255,255,1) 70px);
}
브라우저 호환성이 구현은 Border-Radius, Box-Shadow, : 이전 및 다음 기능 (Chrome, Firefox 및 Safari)을 지원하는 대부분의 브라우저에서 잘 작동합니다. 새로운 기능을 지원하지 않는 브라우저에서는 원본 이미지 만 표시됩니다.
나만의 구현을 만듭니다
다음과 같은 도움으로 : Pseudo-Classes 후에는 이미지를위한 많은 스타일을 만들 수 있으며 새로운 효과를 직접 만들 수 있습니다.