CSS3 필터링 효과-HTML 튜토리얼-php.cn

CSS3 필터링 효과

WBOY

풀어 주다： 2016-08-04 08:53:14

원래의

1677명이 탐색했습니다.

위 사진은 CSS3의 새로운 기능에 대한 필터 효과입니다. 이 기능을 익히고 나면 아름다움과 멋짐을 사랑하는 빅웹피플들이 코드를 완벽하게 활용하여 사진을 아름답게 만들 수 있습니다~~

자, 먼저 사진 뒤의 흰색 프레임을 알아보겠습니다

　　　　<style>

로그인 후 복사

　　　#div1{

/*div의 너비, 높이 및 색상 정의*/

너비: 200px;
높이: 250px
배경: 흰색;

　　　　/*사진의 내부 패딩 거리는 15px이고 텍스트는 중앙에 위치합니다*/

　　　　　　padding: 15px;

　　　　text-align: center;

/* 흰색 배경을 -10도 회전 */

-webkit-transform: 회전(-10도);

/*배경에 그림자 효과 부여*/

box-shadow: 4px 4px 4px #666;
float: left;
}

　　　　</style>　　　　　　　<br />　　　　　　<body><br />　　　　　　　　　<div id="div1">
			<img src="img/001V28Mwty6Fww02IiNad&690.jpg">
			<p>灰色滤镜</p>
		</div><br />　　　　　　</body>

로그인 후 복사

흰색 배경 프레임을 작성했다면 이제 필터를 적용할 차례

우선 첫 번째 사진, 예술의 흑백 사진을 찍자

<span style="color: #000000;">　　　　　　　　#div1 img{

　　　　　　　　</span><span style="color: #008000;">/*</span><span style="color: #008000;">把div1里面的图片百分百，等同于相对于在div1里面百分比放大填充</span><span style="color: #008000;">*/</span><span style="color: #000000;">
　　　　　　　　　　width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;<br /></span>

로그인 후 복사

<span>　　　　　　　/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/</span>

로그인 후 복사

<span style="color: #000000;">　　　　　　　　　　</span>-webkit-filter: grayscale(<span style="color: #800080;">1</span><span style="color: #000000;">); 　　　　　　　　　　}</span>

로그인 후 복사

두번째 사진은 음...오래된 사진입니다.

<span style="color: #000000;">#div1 img{
            width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
            </span>-webkit-filter: sepia(<span style="color: #800080;">1</span><span style="color: #000000;">);
        }</span>

로그인 후 복사

세번째 사진, 역색? 무슨색인지 잘 모르겠네요

<span style="color: #000000;">#div1 img{
            width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
            </span>-webkit-filter: hue-<span style="color: #000000;">rotate(200deg);
        }</span>

로그인 후 복사

네번째 사진은 하얀 안개가 겹겹이 덮여있는 것 같아요

<span style="color: #000000;">#div1 img{
            width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
            </span>-webkit-filter: opacity(<span style="color: #800080;">0.5</span><span style="color: #000000;">);
        }
            </span>

로그인 후 복사

렌더링에 표시되지 않은 사진이 또 있습니다. 블러 효과 코드는 다음과 같습니다

<span style="color: #000000;">#div4 img{
            width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
            </span>-webkit-filter: opacity(<span style="color: #800080;">0.5</span><span style="color: #000000;">);
        }</span>

로그인 후 복사

자, 필터 공유는 마쳤으니 이제 예쁜 사진보러 가겠습니다