CSS에서 그림을 어둡게 만드는 방법

그림을 어둡게하면보기가 더 어려워 지지만, 그것이 당신이 찾고있는 효과 일 수 있습니다. 희미한 이미지는 웹 페이지에서 눈에 잘 띄지 않게되고 주변 이미지보다주의를 덜줍니다. 예를 들어 밝은 해변 사진을 어둡게하여 이미지 아래의 메뉴에 사용자의 초점을 끌 수 있습니다. 이 디밍 효과를 내기 위해 여러 이미지를 만들 필요가 없습니다. CSS (Cascading Style Sheets)는 몇 줄의 코드를 사용하여이 트릭을 수행 할 수 있습니다.

CSS

CSS는 사이트 디자이너가 객체가 웹 페이지에서 표시되는 방식을 정의하는 데 사용하는 언어입니다. 색상 및 불투명도와 같은 속성은 다음 예제와 같은 값을 갖습니다. .redBorder {border-color : red; border-style : solid;}

이 코드는 redBorder라는 CSS 클래스를 만듭니다. HTML img 태그 중 하나가이 클래스를 참조하면 사이트 방문자는 웹 페이지에서 이미지를 볼 때 이미지 주위에 단색 테두리가 보입니다. 이 클래스를 참조하는 HTML 코드는 다음과 같이 보이며 빨간색 테두리는이 img 태그의 클래스 참조를 제거하여 제거 할 수 있습니다.

CSS 불투명도

CSS를 사용하여 이미지의 불투명도를 변경하면 더 어두워집니다. 아래에 표시된 코드는 40 퍼센트의 불투명도 값을 정의하는 opacity40이라는 클래스를 만듭니다. .opacity40 {filter : alpha (opacity = 40);

불투명도 : 0.4; }

클래스의 필터 속성은 0에서 100 사이의 불투명도 배율을 사용하고 불투명도 속성은 0에서 1까지의 값을 갖는 불투명도 배율을가집니다. 두 속성을 모두 사용하면 모든 브라우저가 이미지의 불투명도를 변경할 수 있습니다. 이 클래스 참조를 이미지에 추가하여 어둡게 만듭니다. 또한 "opacity100"이라는 클래스를 만들고 이미지의 불투명도가 100 %가되도록 값을 설정할 수 있습니다. 이 클래스는 이미지를 불투명하게 만듭니다.

프로그래밍 방식으로 조광하기

사용자가 페이지를 열면 흐리게 표시된 그림이 웹 페이지에 표시 될 수 있으며 페이지가로드 된 후 코드로 인해 이미지가 어두워 질 수 있습니다. 이미지를 초기에 어둡게하려면 이전에 설명한대로 불투명도를 더 낮은 값으로 설정하십시오. 응용 프로그램이 실행될 때 이미지를 희미하게하려면 아래 예제와 같이 이미지의 불투명도를 정의하는 클래스 이름을 변경합니다. var imageObject = document.getElementById ( "image1"); imageObject.className = "opacity40";

이 코드는 JavaScript 함수 내부에 나타나며 이미지에 대한 참조를 가져 와서 클래스 이름을 "opacity40"으로 변경합니다. 사용자는 JavaScript 함수를 실행하는 버튼을 클릭하거나 코드에서 언제든지 호출 할 수 있습니다.

고려 사항

동적으로 불투명도를 변경하려면 JavaScript 함수에서 희미하게하려는 그림의 id 값이 필요합니다. 앞에서 설명한 이미지 ID는 "image1"입니다. 희미하게 찍을 사진이 여러 개인 경우 고유 한 ID 값을 지정하고 불투명도 변경을 수행하는 함수로 전달하십시오. 다른 불투명도를 정의하는 것처럼 원하는만큼 CSS 클래스를 만듭니다. 그런 다음 JavaScript 함수에서 클래스 참조를 변경하여 이미지를 어느 정도 희미하게 할 수 있습니다.