인쇄를 위해 CSS를 통해 이미지를 텍스트로 변경 하시겠습니까?

Question

인쇄하려는 웹 페이지에 헤더 배너가 있다고 가정 해 봅시다. 누군가의 잉크를 낭비하는 대신 이미지의 전체 블록을 인쇄하는 대신 이미지를 H1 크기의 텍스트로 바꾸는 방법이 있습니까?

Answer 1

당신은 넣을 수 있습니다 h1 소스의 같은 위치에있는 요소와 이미지, 이미지 CSS가 있습니다. display:none 인쇄 매체의 경우 h1 로 설정 display:none 화면 매체 용.

Answer 2

나는 보통 내 스타일 시트에 다음을 추가합니다.

.nodisplay
{
    display: none;
}

@media print {
    * {
        background-color: white !important;
        background-image: none !important;
    }
    .noprint
    {
        display: none;
    }
}

그런 다음 할당하십시오 noprint 인쇄해서는 안되는 요소로 클래스 :

<div class="noprint">

</div>

예를 들어 다음과 같은 것이 작동해야합니다.

<img src="logo.png" class="noprint" ...>
<h1 class="nodisplay">Text Logo</h1>

Answer 3

Bryan, 일반적으로 로고와 같은 것들에서는 그래픽에 이미지 교체를 사용하여 로고 자체가 실제로 H1 태그에 있습니다. 그런 다음 내 인쇄 스타일 시트에서. 나는 이런 일을한다 ...

h1#logo a, h1#home-logo{
    text-indent: 0 !important;
    background-image: none !important;
    font-size: 1.2em !important;
    display: block !important;
    height: 1em !important;
    width: 100% !important;
    text-decoration: none !important;
    color: black !important;
}

이미지 교체를 제거하고 텍스트를 표시합니다. 물론이 스타일 시트를 별도로 사용하는지 확인하십시오. media="print".

Answer 4

Adam의 솔루션에 추가 : 텍스트가 고정되어 있다면 ( "헤드 배너가"Ad가없고 "그에 대한 광고가 있었다"), 당신은 사용할 수 있습니다. : 전 또는 유사 요소 후 HTML에 텍스트를 미리 삽입하는 대신 텍스트를 삽입합니다.

많은 이미지를 동일한 텍스트로 교체하는 경우 HTML을 더 가볍게 만듭니다.

이 CSS 기능을 싫어한다고 말해야하지만 사용하고 싶다면 있습니다.