웹 페이지에서 디지털 이미지를 숨기는 방법

계단식 스타일 시트는 웹 사이트에 페이지를 유지할 때 시간을 절약 할 수 있습니다. 예를 들어 디지털 이미지는 일부 웹 페이지에 나타납니다. 사람들이 그 이미지를 보지 못하도록해야하는 경우 CSS를 사용하여 HTML 문서에서 한 단어를 변경하여 이미지를 숨길 수 있습니다. 문서의 CSS 코드를 빠르게 업데이트하여 이미지를 즉시 다시 표시 할 수도 있습니다.

1.

하나 이상의 이미지가 포함 된 HTML 문서를 열고 문서의 본문 섹션을 찾습니다. 본문 섹션의 이미지 태그는 아래에 표시된 것과 유사하게 나타납니다.

단어 "img"로 시작하는 기본 이미지 태그 이 예제의 태그는 "img / setting-up-new-business / 167 / how-hide-digital-images-web-pages-2.jpg"라는 이미지를 참조합니다.

2.

다음 예와 같이 이미지 태그 중 하나를 "visibility"라는 CSS 클래스를 참조하도록 변경하십시오.

태그에 이미 클래스 참조가있는 경우 약간 다른 방식으로 태그를 변경해야합니다. 태그가 아래와 같이 표시된다고 가정 해보십시오.

그 이미지 태그는 이미 "myclass"라는 클래스를 참조합니다. img 태그가 클래스를 이미 참조하고있는 경우, 아래에 표시된 것처럼 클래스 이름 뒤에 "visibility"를 추가하십시오.

삼.

문서의 머리 부분에 다음을 붙여 넣습니다.

그러면 가시성 클래스가 만들어지고 표시 속성 값이 "블록"으로 설정됩니다.이 값을 사용하면 이미지가 표시됩니다.

4.

문서를 저장하고 모든 브라우저에서 엽니 다. 이미지가 정상적으로 표시됩니다.

5.

편집기로 돌아가서 문서 머리 부분에 추가 한 CSS 코드를 찾습니다. 표시 속성의 값을 "block"에서 "none"으로 변경하고 문서를 저장하십시오.

6.

브라우저로 돌아가서 "Ctrl-F5"키를 눌러 임시 저장 공간을 지우십시오. 페이지가 새로 고침되면 이미지가 사라집니다.

팁

• 숨기려는 각 이미지에 클래스 참조를 추가하십시오. 원하는 CSS 클래스 이름을 지정하십시오. 이 예제에서이 이름은 "visibility"입니다.
• "없음"을 "차단"으로 변경하여 이미지를 다시 표시하십시오.