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

CSS3 필터링 효과의 간단한 예

高洛峰

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

원래의

1622명이 탐색했습니다.

다음 편집기는 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 중국어 웹사이트를 주목하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS3 필터링 효과의 간단한 예