CSS 이미지
이 장에서는 CSS 레이아웃 이미지를 사용하는 방법을 보여줍니다.
필렛 사진
썸네일
우리는 사용 border 축소판을 만드는 속성입니다.
예
{
디스플레이 : 인라인 블록;
국경 : 1 픽셀 고체 #ddd;
국경 반경 : 4 픽셀;
패딩 : 5px;
전환 : 0.3S;
}
A : 가져가 {
상자 그림자 : 0 0 2 픽셀 x 1 픽셀 RGBA
(0, 140, 186, 0.5);
}
href가 = "paris.jpg">
<IMG SRC = "paris.jpg"고도 = "파리">
</ A>
디스플레이 : 인라인 블록;
국경 : 1 픽셀 고체 #ddd;
국경 반경 : 4 픽셀;
패딩 : 5px;
전환 : 0.3S;
}
A : 가져가 {
상자 그림자 : 0 0 2 픽셀 x 1 픽셀 RGBA
(0, 140, 186, 0.5);
}
href가 = "paris.jpg">
<IMG SRC = "paris.jpg"고도 = "파리">
</ A>
»시도
응답 이미지
응답 이미지가 자동으로 화면 크기의 다양한 맞습니다.
예를 들어, 당신은 효과의 크기를 볼 수있는 브라우저를 재설정 할 수 있습니다 :
원래의 최대 값보다 크지 않은 크기를 확대하려면 이미지를 확장 할 수있는 자유, 이미지가 필요한 경우, 다음과 같은 코드를 사용할 수 있습니다 :
팁 : 웹 콘텐츠 더 반응 형 디자인의 기준이 될 수 CSS 반응 형 디자인 자습서 .
사진 텍스트
이미지 텍스트를 찾는 방법 :
카드 이미지
예
div.polaroid {
폭 : 80 %;
배경 색상 : 흰색;
상자 그림자 : 0 0 4 픽셀 8px RGBA (0, 0, 0, 0.2), 0 6 픽셀 20 픽셀 RGBA 0 (0, 0, 0, 0.19);
}
IMG {폭 : 100 %}
div.container {
텍스트 정렬 : 센터;
패딩 : 10px 20 픽셀;
}
폭 : 80 %;
배경 색상 : 흰색;
상자 그림자 : 0 0 4 픽셀 8px RGBA (0, 0, 0, 0.2), 0 6 픽셀 20 픽셀 RGBA 0 (0, 0, 0, 0.19);
}
IMG {폭 : 100 %}
div.container {
텍스트 정렬 : 센터;
패딩 : 10px 20 픽셀;
}
»시도
이미지 필터
CSS의 filter 속성은 (: 퍼지 및 채도 예를 들어) 시각 효과와 요소를 추가 할 수 있습니다.
참고 : 인터넷 익스플로러, 또는 Safari 5.1 (및 이전 버전)이 속성을 지원하지 않습니다.
예
흑백 사진 (100 % 회색) 모든 색상 편집 :
IMG {
-webkit-필터 : 그레이 스케일 (100 % ) / * 크롬, 사파리, 오페라 * /
필터 : 계조 (100 %);
}
-webkit-필터 : 그레이 스케일 (100 % ) / * 크롬, 사파리, 오페라 * /
필터 : 계조 (100 %);
}
»시도
팁 : 방문 CSS 필터 참조 설명서를 더 많은 콘텐츠.
응답 이미지 갤러리
예
.responsive {
패딩 : 0 6 픽셀;
플로트 : 왼쪽;
폭 : 24.99999 %;
}
@media 만 화면 (최대 폭 : 700 픽셀) {
.responsive {
폭 : 49.99999 %;
마진 : 6 픽셀 0;
}
}
@media 만 화면 (최대 폭 : 500 픽셀) {
.responsive {
폭 : 100 %;
}
}
패딩 : 0 6 픽셀;
플로트 : 왼쪽;
폭 : 24.99999 %;
}
@media 만 화면 (최대 폭 : 700 픽셀) {
.responsive {
폭 : 49.99999 %;
마진 : 6 픽셀 0;
}
}
@media 만 화면 (최대 폭 : 500 픽셀) {
.responsive {
폭 : 100 %;
}
}
»시도
사진 모달 (모달)
이 예제는 이미지를 렌더링하기 위해 CSS와 자바 스크립트를 함께 결합하는 방법을 보여줍니다.
첫째, 우리는 모달 창 (대화를) 만들 수 CSS를 사용하여 기본적으로 숨겨져 있습니다.
우리는 그 다음 우리는, 사진이 팝업 창에 표시됩니다 클릭하면 모달 창을 표시 자바 스크립트를 사용 :
예
// 모달 창을 받기
VAR 모달 = document.getElementById를 ( 'myModal' );
본 중국어 팝에 설명 된대로 // 사진 프레임 모드를 가져, 고도의 이미지 속성
var에 IMG = document.getElementById를 ( 'myImg' );
VAR modalImg = document.getElementById를 ( "img01" );
VAR captionText = document.getElementById를 ( "캡션" );
img.onclick = 함수 () {
modal.style.display = "블록";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
//의 <SPAN> 요소 가져 오기 모달을 닫을
VAR 범위 ( "가까이"= document.getElementsByClassName ) [0]
사용자가 클릭 // 때 <스팬 > (x)를, 모달을 닫습니다
span.onclick = 함수 () {
modal.style.display = "없음";
}
VAR 모달 = document.getElementById를 ( 'myModal' );
본 중국어 팝에 설명 된대로 // 사진 프레임 모드를 가져, 고도의 이미지 속성
var에 IMG = document.getElementById를 ( 'myImg' );
VAR modalImg = document.getElementById를 ( "img01" );
VAR captionText = document.getElementById를 ( "캡션" );
img.onclick = 함수 () {
modal.style.display = "블록";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
//의 <SPAN> 요소 가져 오기 모달을 닫을
VAR 범위 ( "가까이"= document.getElementsByClassName ) [0]
사용자가 클릭 // 때 <스팬 > (x)를, 모달을 닫습니다
span.onclick = 함수 () {
modal.style.display = "없음";
}
»시도