Question

"styles": [
  "src/styles.css",
  "node_modules/primeng/resources/themes/omega/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "node_modules/primeicons/primeicons.css"
],

我使用上面的代码在包含的右侧显示背景图像，并通过从红色到图像透明度的线性渐变填充左侧空间。但是，这不起作用，因为它在右侧显示图像，但在左侧仅显示了从红色到透明的线性渐变，不会覆盖图像...我该如何解决？

Answer 1

只需翻转渐变和图像顺序即可。首先是渐变，然后是图像。

body {
  background-image: linear-gradient(red, transparent), url('http://unsplash.it/1200x800');    
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}

div {
  height: 300px;
}

<div></div>

Answer 2

如果您尝试让红色从左侧开始，然后逐渐过渡到屏幕右侧的透明，则只需在“红色，透明”之前的渐变中添加“向右”即可。

group   yr  mo  book_value  accum_depr  depr_rate   depr_expense    book_addn   book_growth
a     2018  7   10000.00    200.00      0.02        10.00           0           1.01
a     2018  8   10100.00    398.00      0.02        198.00          0           1.01
a     2018  9   10201.00    594.06      0.02        196.06          0           1.01
a     2018  10  10303.01    788.24      0.02        194.18          0           1.01
a     2018  11  10486.04    982.20      0.02        193.96          80          1.01
a     2018  12  10590.90    1174.37     0.02        192.17          0           1.01
a     2019  1   10696.81    1364.82     0.02        190.45          0           1.01
a     2019  2   10843.78    1554.40     0.02        189.58          40          1.01
a     2019  3   10952.22    1742.35     0.02        187.96          0           1.01
a     2019  4   11061.74    1928.74     0.02        186.39          0           1.01
a     2019  5   11172.35    2113.61     0.02        184.87          0           1.01
a     2019  6   11284.08    2297.02     0.02        183.41          0           1.01
b     2018  7   15000.00    700.00      0.02        15.00           0           1.01
b     2018  8   15150.00    989.00      0.02        289.00          0           1.01
b     2018  9   15401.50    1277.25     0.02        288.25          100         1.01
b     2018  10  15625.52    1564.22     0.02        286.97          70          1.01
b     2018  11  15781.77    1848.57     0.02        284.35          0           1.01
b     2018  12  15939.59    2130.39     0.02        281.82          0           1.01
b     2019  1   16098.98    2409.76     0.02        279.37          0           1.01
b     2019  2   16259.97    2686.76     0.02        277.00          0           1.01
b     2019  3   16422.57    2961.48     0.02        274.72          0           1.01
b     2019  4   16586.80    3233.99     0.02        272.51          0           1.01
b     2019  5   16752.67    3504.36     0.02        270.37          0           1.01
b     2019  6   16920.19    3772.68     0.02        268.32          0           1.01

CSS图像线性渐变封面图像

2 个答案: