Drukowanie linii rysowanych za pomocą CSS

0

Hej! Muszę zrobić przekreślenie pewnego elementu na stronie (czerwona kreska w poprzek tekstu).
Zrobiłem coś takiego (przykład):

<div style="background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px));">
<p style="text-align:right;font-size: small;padding-left: 30px;padding-right: 30px; margin-top: 30px;"> 2015.11.06 12:50</p>
<p style="text-align:center;font-size: large;padding-left: 30px;padding-right: 30px;"> <strong>Nazwa firmy</strong></p>
<p style="text-align:left;font-size: medium;font-weight: normal; padding-left: 30px;padding-right: 30px;"><strong>Nr ewid: 12</strong><br>
Baza danych xyz </p><p style="text-align:center; font-size: medium; font-weight: bold; padding-left: 30px;padding-right: 30px; margin-top: 30px;"> KARTA URZĄDZENIA </p>
<p style="text-align:left;font-size: medium; padding-left: 30px;padding-right: 30px; margin-top: 30px;"><strong>Zakład     </strong><br>
<strong>Rodzaj urządzenia    </strong>Komputer <br>

</div>

 

W przeglądarce jest wszystko ok (generalnie to jest raport z bazy MS SQL generowany przez program w C#, plik wyświetlam hostując przeglądarkę IE w WinForms).
Wyświetla się prawidłowo, natomiast przy wydruku (zarówno z Firefox jak i z IE 11) nie ma tej czerwonej linii w poprzek dokumentu...
Coś trzeba ustawić w CSS dodatkowo?
Wybaczcie, ale nie jestem biegły w CSS.

1

Przy drukowaniu w przeglądarce zaznacz 'Drukuj tło' :)

0

No tak, w sumie nie wpadłem na to.
Działa. Ale jak to zrobić, aby nie trzeba było zaznaczać takiej opcji?
Przezroczysty PNG z kreską?
Próbowałem w CSS wymusić opcje drukowania tła, wszystko jest OK ale na podglądzie. Kreska jest, natomiast jak wydrukuje stronę to kreski nie ma.
Kod:

@media print {
body {
   content:background-image;
  }
}
 
0

border-bottom nie wystarczy?

0

Statycznie można to zrobić robiąc coś w tym stylu:

<div style="background-color: #eee;" id="crossed">
    bla<br/>
    bla<br/>
    bla<br/>
</div>
<hr id="red-line" style="position: relative; top: -30px; border-bottom: solid 1px red; transform: rotate(3deg)"/>

Natomiast żeby przekreślenie dopasowywało się dynamicznie do wielkości diva można użyć js:

<div style="background-color: #eee;" id="crossed">
    bla<br/>
    bla<br/>
    bla<br/>
</div>
<hr id="red-line" style="position: relative; border-bottom: solid 1px red; margin: 0; padding: 0;"/>

<script>
    (function() {
        var crossed = document.getElementById('crossed');
        var crossedHeight = crossed.clientHeight;
        var crossedWidth = crossed.clientWidth;
        var deg = Math.atan(crossedHeight / crossedWidth) * (180 / Math.PI);
        var redLine = document.getElementById('red-line');
        redLine.style.transform = 'rotate(' + -deg + 'deg)';
        redLine.style.top = -crossedHeight / 2 + 'px';
    })();
</script>

1 użytkowników online, w tym zalogowanych: 0, gości: 1