CSS3 필터링 효과의 간단한 예-CSS 튜토리얼-php.cn

CSS3 필터링 효과의 간단한 예

高洛峰

풀어 주다： 2017-03-04 10:41:29

원래의

1638명이 탐색했습니다.

다음 편집기는 CSS3 필터링 효과의 간단한 예를 보여줍니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다.

CSS3 필터링 효과의 간단한 예

위의 사진은 CSS3의 새로운 기능에 대한 필터 효과를 알아보고 나니, 우리 빅웹인들이군요. 미모와 멋짐, 코드로 사진을 완벽하게 아름답게 만드는 건 가능하지 않을까~~

자, 먼저 사진 뒤에 흰색 프레임을 구현해 볼까요,

으으으

넣고 흰색 배경 프레임 작성 후 필터 적용 차례

먼저 첫 번째 사진을 찍어보자 예술적인 흑백

으으으

두 번째 사진 어.. . 옛날사진.

아아아

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

<style>
#p1{   

　　　　　　　　　　/*给p定义宽高和颜色*/   


　　　　　　　　　　width: 200px;   
　　　　　　　　　　height: 250px;   
　　　　　　　　　　background: white;    

　　　　　　　　　/* 内填充距离照片为15px ，文字居中*/   
　　　　　　　　　　padding: 15px;   

　　　　　　　　　　text-align: center;   

　　　　　　/*　　把白色背景旋转-10deg  */   

　　　　　　　　　　-webkit-transform: rotate(-10deg);   

　　　　　　/*给背景一个阴影的效果*/   
　　　　　　　　　　box-shadow: 4px 4px 4px #666;   
　　　　　　　　　　float: left;   
　　　　　　　　　　}   



</style>
<BR>
<body><BR>
<p id="p1">
<img  src="img/001V28Mwty6Fww02IiNad&690.jpg" alt="CSS3 필터링 효과의 간단한 예" >
<p>灰色滤镜</p>
</p>
<BR>
</body>

로그인 후 복사

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

#p1 img{   

/*把p1里面的图片百分百，等同于相对于在p1里面百分比放大填充*/   
width: 100%;　　　　　　　   
/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/　   
-webkit-filter: grayscale(1); 　　}

로그인 후 복사

거기 다른 사진입니다 렌더링에는 없지만 블러 효과 코드는 다음과 같습니다

#p1 img{   
            width: 100%;   
            -webkit-filter: sepia(1);   
        }

로그인 후 복사

네 필터 공유는 마쳤으니 이쁜 사진으로 가겠습니다

위의 CSS3 필터링 효과에 대한 간단한 예시는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 홈페이지도 지원해 주시길 바랍니다.

CSS3 필터링 효과에 대한 더 간단한 예와 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!