CSS:将标题中的梯度背景与图像作为徽标相结合

Question

我正在尝试使用此梯度：

background: rgba(0, 0, 0, 0) linear-gradient(45deg, rgba(204, 202, 204, 1) 0%, rgba(204, 202, 204, 1) 11%, rgba(252, 252, 252, 1) 45%, rgba(252, 252, 252, 1) 53%, rgba(214, 212, 214, 1) 81%, rgba(204, 202, 204, 1) 88%) repeat scroll 0 0;

和此图像：

background-image: url('./wp-content/uploads/2016/12/opt_tree_only.png');
background-size: contain;
background-repeat: no-repeat;
background-position: 10% 25%;

组合在一起，但是我没有这样做，因为它显示了梯度或图像，这两者都不会同时显示。我与CSS合作不多，因此我已经用完了更多想法。

Answer 1

您可以将梯度添加为伪元素，因此可以：

div {
  height: 200px;
  width: 200px;
  background-image: url('http://placehold.it/350x350');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 10% 25%;
  position: relative;
}
div:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(204, 202, 204, 1) 0%, rgba(204, 202, 204, 1) 11%, rgba(252, 252, 252, 1) 45%, rgba(252, 252, 252, 1) 53%, rgba(214, 212, 214, 1) 81%, rgba(204, 202, 204, 1) 88%);
  opacity: .5;
}

<div></div>