css實現斜線效果以及vue自帶外掛程式列印背景色

2021-10-10 10:24:33 字數 766 閱讀 4253

在開發過程中遇到了乙個很奇葩的問題,問題要求總結有如下三點:

頁面分三部分,上半部分高度不確定,下半部分高度確定,中間部分需要填充除了上半部分和下半部分的區域。

填充方式為斜線。

該頁面需要列印出來。

這三個要求隨便乙個單獨實現都不難,難得是全部滿足。

首先,中間部分要填充剩下的區域,我採用彈性盒模型去實現。

...

......

然後再去填充一條對角斜線,這個時候問題就出現了,網上大部分的畫斜線的方式都是要已知高度和寬度的(多種實現斜線的方式),而我需要填充的中間部分是隨著上半部分的大小變化而變化的,高度無法確定,那怎麼辦呢?我搜到了一種畫法。

.middle-div
最後,來解決第三個問題,列印該頁面。又出現了問題了----這種方式是通過區域背景色實現的,而vue自帶的列印外掛程式vue-print-nb是無法列印背景色的,解決方法就是顯示新增乙個樣式定義。

.middle-div{

-webkit-print-color-adjust: exact;

background: linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);

好啦,至此,問題全部解決!

(我才不會說因為糾結於怎麼不使用背景色的形式畫斜線,導致我搞這個東西搞了一下午。。。)

vue以及html加css實現吸頂效果

vue實現吸頂效果 頁面 頭部展示內容 自動粘滯固定頭部,需要一直展示的 中部展示內容,中部展示內容,中部展示內容 data data mounted mounted methods methods console.log 滾動的距離 scrolled,頭部的高度 header height thi...

css 實現 table斜線表頭

border left border right border top border bottom 能實現特殊形狀 資費標準 title style type text css table th,td th 模擬對角線 out b em assessdetail td style head body...

web 中怎麼實現斜線表頭效果?

1.直接做乙個帶有斜線和文字的,在 html 中引用。2.用 css3 的標籤 canvas,將其作為畫布畫一條斜線。缺點 會存在瀏覽器相容性問題,如果只需要在 chrom 中使用可以考慮。其實現在大部分專案中做表都會用報表工具,工具中就基本都有這個功能了,設定方式也很簡單,潤幹報表中只要直接點選個...