DIV가 포함 된 인쇄용 스타일 시트

Question

인쇄 가능한 버전을 만들고자하고 새로운 인쇄 스타일 시트를 사용하고있는 사이트가 있는데 문제가 있습니다. 나는 HTML 파일의 빈 DIV 인 별 등급에 대한 DIV를 가지고 있지만, 실제 CSS에는 실제 별에 대한 배경 이미지가 있습니다. HTML 파일에서

사업부는 다음과 같습니다

<div class="example_rating"></div> 

일반 스타일의 코드는 다음과 같습니다

내 문제는 등급이 표시되지 않는 것을

.example_rating { 

    height:40px; 

    width:200px; 

    margin-left:20%; 

    background: url('../stars.png') no-repeat scroll 0 0 transparent; 

    } 

웹 페이지의 인쇄 가능한 형식으로 DIV가 숨겨져 있거나 아무것도 가지고 있지 않지만 인쇄 가능한 형식으로 표시되도록하려면 무엇을 할 수 있는지 잘 모르겠습니다.

나는 약간의 애매한 질문을하고 있지만, 어떻게 설명해야할지 모르겠습니다. 필요한 경우 자세한 정보를 제공 할 수 있습니다. 감사!

Answer 1

에 인쇄 스타일을 넣어, 별이 렌더링 배경 이미지로 인쇄 할 때 배경이 일반적으로 기본적으로 표시되지 않습니다.

별을 <img>으로 표시하거나 사용자에게 배경 인쇄를 사용하도록 설정해야합니다.

편집 :

투명 (와 노란색 사업부 내부의 글꼴이 다음이 텍스트 뿐만 아니라과 배경 이미지로 스타 등급을 인쇄하는 것입니다 라운드 얻고, 가장 쉬운 방법 인쇄 스타일 시트). 예 :

<div class="example_rating"> 
    4/5 stars. 
</div> 

스타일 시트 :

.example_rating { 
    color:Transparent; 
    /* Alternatively: text-indent: -9999px; */ 
    height:40px; 
    width:200px; 
    margin-left:20%; 
    background: url('../stars.png') no-repeat scroll 0 0 transparent; 
} 

편집 2 :

당신은 인쇄 스타일이 퍼팅 시도 할 수

가 :

.example_rating { 
    background: none; 
} 
.example_rating:after { 
    content: '4/5 stars' 
} 

이것은 내부에 텍스트를 박았 div를 CSS를 사용하여 인쇄 스타일 시트에만 넣으면, 인쇄 할 때만 나타납니다!

Answer 2

같은 ... 새 인쇄는 스타일 시트를 만들어보십시오 :

<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 

또는 당신의 현재 스타일 시트를, 당신의 CSS에서

@media print { 
}