CSS를 사용하여 이미지의 스타일을하는 방법에 대해 알아 봅니다.
둥근 이미지
사용 border-radius 둥근 이미지를 만들 속성을 :
미리보기 이미지
사용 border 썸네일 이미지를 만드는 속성입니다.
미리보기 이미지 :
예
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
< img src="paris.jpg"
alt="Paris" > »그것을 자신을 시도 링크로 미리보기 이미지 :
예
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0
0 2px 1px rgba
(0, 140, 186, 0.5);
}
< a href="paris.jpg" >
< img src="paris.jpg" alt="Paris" >
< /a > »그것을 자신을 시도 응답 이미지
응답하여 이미지를 자동으로 화면 크기에 맞도록 조정한다.
효과를 볼 수있는 브라우저 창 크기를 조정합니다 :
당신은 이미지가가있는 경우 아래로 확장,하지만 결코 원래 크기보다 크게 확장하려는 경우, 다음을 추가합니다 :
팁 : 우리의 반응 형 웹 디자인에 대한 자세한 읽기 CSS RWD 자습서 .
이미지 텍스트
이미지에 텍스트를 배치하는 방법 :
예
그것을 자신을 시도 :
맨 왼쪽» 오른쪽 상단» 왼쪽 아래» 오른쪽 아래» 중심»폴라로이드 이미지 / 카드
하르, 노르웨이 트롤의 혀
노르웨이 오로라
예
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,
0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
} »그것을 자신을 시도 이미지 필터
하는 CSS filter 속성은 요소 (흐림와 채도 등) 시각 효과를 추가합니다.
참고 : 필터 속성은 인터넷 익스플로러, 에지 (12), 또는 Safari 5.1 및 이전 버전에서는 지원되지 않습니다.
예
검은 색과 흰색 (100 % 회색)에 모든 이미지의 색상을 변경합니다 :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}팁 : 우리의 이동 CSS 필터 참조 CSS 필터에 대한 자세한 내용을 보려면.
응답 이미지 갤러리
CSS는 이미지 갤러리를 생성하는데 사용될 수있다. 이 예는 다양한 화면 크기의 이미지를 다시 배열하는 미디어 쿼리를 사용합니다. 효과를 볼 수있는 브라우저 창 크기를 조정합니다 :
예
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and
(max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px
0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
} »그것을 자신을 시도 팁 : 우리의 반응 형 웹 디자인에 대한 자세한 읽기 CSS RWD 자습서 .
이미지 모달 (고급)
이 CSS와 자바 스크립트를 함께 사용하는 방법을 보여주는 예입니다.
첫째, 모달 창 (대화 상자)을 만들 CSS를 사용하고, 기본적으로 숨 깁니다.
그리고, 모달 창을 표시하고, 사용자는 이미지를 클릭하면 모달 내부의 화상을 표시하기 위하여 자바 스크립트를 사용
예
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it
inside the modal - use its "alt" text as a caption
var img =
document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick =
function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks
on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
} »그것을 자신을 시도