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 함수에서 클래스 참조를 변경하여 이미지를 어느 정도 어둡게 할 수 있습니다.