Tarayıcıları CSS'de arka plan resimleri yazdırmaya nasıl zorlayabilirim?

Bu soru daha önce sorulmuştu ancak çözüm benim durumumda geçerli değil. Sayfanın ayrılmaz bir parçası oldukları için belirli arka plan resimlerinin yazdırıldığından emin olmak istiyorum. (CSS sprite olarak kullanılan birkaçı olduğundan, doğrudan sayfadaki resimler değildir.)

Aynı soruyla ilgili başka bir çözüm, list-style-imageyalnızca her simge için farklı bir görüntünüz varsa işe yarayan, CSS sprite mümkün olmayan kullanılmasını önerir .

Satır içi simgelerle ayrı bir sayfa oluşturmanın yanı sıra, başka bir çözüm var mı?

Bir tarayıcının yazdırma yöntemleri üzerinde çok az kontrole sahipsiniz. En fazla TAVSİYE edebilirsiniz, ancak tarayıcının yazdırma ayarlarında "arka plan resimleri yazdırma" varsa, sayfanızı yeniden yazmadan arka plan görüntülerini diğer içeriğin arkasında olan kayan "ön plan" görüntülerine dönüştürmek için yapabileceğiniz hiçbir şey yoktur.

Chrome ve Safari ile -webkit-print-color-adjust: exact;arka plan rengini ve / veya resmini yazdırmaya zorlamak için CSS stilini öğeye ekleyebilirsiniz.

Tarayıcıların varsayılan olarak arka plan renkleri ve resimleri yazdırma seçenekleri kapalı. Bunu atlamak için CSS'ye bazı satırlar ekleyebilirsiniz. Sadece ekle:

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

Arka plan resmini CSS ile yazdırmanın bir yolunu buldum. Arka planınızın nasıl düzenlendiğine biraz bağlı, ancak uygulamam için işe yarıyor gibi görünüyor.

Esasen, @media printstil sayfanızın sonuna eklersiniz ve gövde arka planını biraz değiştirirsiniz.

Örneğin, mevcut CSS'niz şöyle görünüyorsa:

body {
background:url(images/mybg.png) no-repeat;
}

Stil sayfanızın sonuna şunları eklersiniz:

@media print {
body {
   content:url(images/mybg.png);
  }
}

Bu, görüntüyü vücuda "ön plan" görüntüsü olarak ekler ve böylece yazdırılabilir hale getirir. z-indexDoğru yapmak için bazı ek CSS eklemeniz gerekebilir . Ancak yine, sayfanızın düzenine bağlı.

Baskı görünümünde görünecek bir başlık resmi alamadığımda bu benim için çalıştı.

Aşağıdaki kod benim için iyi çalışıyor (en azından Chrome için).

Ayrıca bazı kenar boşluğu ve sayfa yönlendirme kontrolleri ekledim. (Dikey, yatay)

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>

Önemli özniteliğini kullandığınızdan emin olun. Bu, stillerinizin yazdırıldığında korunma olasılığını önemli ölçüde artırır.

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

@ Ckpepper02'nin dediği gibi, gövde içeriği: url seçeneği iyi çalışıyor. Bununla birlikte, biraz değiştirirseniz,: before sözde öğesini kullanarak bir tür başlık görüntüsü eklemek için aşağıdaki gibi kullanabileceğinizi buldum.

@media print {
  body:before { content: url(img/printlogo.png);}
}

Bu, resmi sayfanın üst kısmına kaydıracak ve benim sınırlı testime göre Chrome ve IE9'da çalışıyor

-hanz

Psuedo elemanlarını kullanın. Pek çok tarayıcı arka plan resimlerini göz ardı ederken, içeriği bir resme ayarlanmış psuedo öğeleri teknik olarak arka plan resimleri DEĞİLDİR. Ardından, arka plan görüntüsünü kabaca görüntünün gitmesi gereken yere konumlandırabilirsiniz (orijinal görüntü kadar kolay veya kesin olmasa da).

Bunun bir dezavantajı, bunun Chrome'da çalışması için, bu davranışı yazdırma medyası sorgunuzun dışında belirtmeniz ve ardından yazdırma medyası sorgu bloğunda görünür yapmanız gerektiğidir. Yani, bunun gibi bir şey ...

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

Dezavantajı, görüntünün genellikle normal sayfa yüklemelerinde indirilerek gereksiz yığınlar eklenmesidir. Orijinal, görünür resim için zaten kullandığınız resmi / yolu kullanarak bundan kaçınabilirsiniz.

Arka plan resmine! önemli öznitelik eklediğinizde google chrome'da çalışıyor, önce öznitelik eklediğinizden emin olun ve tekrar deneyin, bunu böyle yapabilirsiniz

    .inputbg {
background: url('inputbg.png') !important;  

}

Sabit renkler için kenarlıkları kullanabilirsiniz.

 borderTop: solid 15px black;

ve gradyan arka planı için şunları kullanabilirsiniz:

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;

https://gist.github.com/danomanion/6175687 , bir arka plan görüntüsü yerine özel bir madde işareti kullanarak zarif bir çözüm önerir:

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

Bunu bir

@media print {
}

bloke ediyorsanız, ekranda arka plan resmi olarak oluşturulmuş şeffaf üzeri beyaz bir logoyu baskı için şeffaf üzeri siyah logo ile değiştirebiliyorum.

Bunun gibi bazı numaralar yapabilirsiniz:

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

Gövde etiketinde:

<img src="YOUR IMAGE URL" class="whater"/>