2

Всем привет , пришло время делать печатную версию сайта , появился вопрос. В html коде страницы , расположены изображения которые скрыты за пределы браузера , при просмотре печатной версии страницы все изображения оказываются на печатной страницы , и занимают всю страницу , тем самым получается 8 страниц , вопрос состоит вот в чем .

Можно ли сделать как либо , может через @media print { } Либо через js , так , чтобы при открытии печатной версии страницы , некий html код с изображениями не показывался ? Спасибо. Вот код

<div class="container">
	<div id="content-slider">
    	<div id="slider">
        	<div id="mask">
            <ul>
           	<li id="first" class="firstanimation">
            <a href="#">
            <img src="images/img_1.jpg" alt="Cougar" width="100%" height="100%"/>
            </a>
            <div class="tooltip">
            <h1>Cougar</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="images/img_2.jpg" alt="Lions" width="100%" height="100%"/>
            </a>
            <div class="tooltip">
            <h1>Lions</h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="images/img_3.jpg" alt="Snowalker" width="100%" height="100%"/>
            </a>
            <div class="tooltip">
            <h1>Snowalker</h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="images/img_4.jpg" alt="Howling" width="100%" height="100%"/>
            </a>
            <div class="tooltip">
            <h1>Howling</h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="images/img_5.jpg" alt="Sunbathing" width="100%" height="100%"/>
            </a>
            <div class="tooltip">
            <h1>Sunbathing</h1>
            </div>
            </li>
            
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>

3 ответа 3

2

Тем элементам которые хочешь скрыть в @media print { } присвой display:none;

2
  • дело в том что , тот код который я скинул это css слайдер , и мне нужно чтобы , первое изображение слайдера отображалось на принтовой странице , а все остальные нет.
    – hovdev
    25 сен 2016 в 16:30
  • Ну в таком случае решение задачи схоже. Просто скрываем все остальные изображения. Тем более как я вижу из кода, каждый тег <li> имеет свой id, а значит к ним можно обращаться не задевая другие элементы. 25 сен 2016 в 16:57
0

В версии для печати установите общие стили в head для img или какого-то выбранного вами класса с display:none или же установите этот стиль для каждого img, например: style=display:none

0

Попробуйте стили задать так: <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

Пример.

index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>TITLE</title>
  <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
</head>
<body>
  <div class="container">
    <div id="content-slider">
        <div id="slider">
            <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
            <img src="images/img_1.jpg" alt="Cougar" width="100%" height="100%"/>
            </a>
            <div class="tooltip">
            <h1>Cougar</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="images/img_2.jpg" alt="Lions" width="100%" height="100%"/>
            </a>
            <div class="tooltip">
            <h1>Lions</h1>
            </div>
            </li>

            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="images/img_3.jpg" alt="Snowalker" width="100%" height="100%"/>
            </a>
            <div class="tooltip">
            <h1>Snowalker</h1>
            </div>
            </li>

            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="images/img_4.jpg" alt="Howling" width="100%" height="100%"/>
            </a>
            <div class="tooltip">
            <h1>Howling</h1>
            </div>
            </li>

            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="images/img_5.jpg" alt="Sunbathing" width="100%" height="100%"/>
            </a>
            <div class="tooltip">
            <h1>Sunbathing</h1>
            </div>
            </li>

            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>
</body>
</html>

css/print.css:

@media print {
  img {
    display: none !important;
  }

  li#first img {
    display: block !important;
  }
}
5
  • Попробовал , не работает , тестировали?
    – hovdev
    25 сен 2016 в 16:49
  • поправила ответ.
    – SVE
    25 сен 2016 в 16:59
  • Решил проблему , спасибо сверху подсказали , присвоил нужному изображению display:block; а ненужным display:none;
    – hovdev
    25 сен 2016 в 17:21
  • 1
    а это img { display: none !important; } li#first img { display: block !important; } не так написано?
    – SVE
    25 сен 2016 в 17:51
  • так , но зачем присваивать !important , если можно обойтись просто display:none ?)
    – hovdev
    25 сен 2016 в 18:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.