CSS：将标题中的渐变背景与图像结合为徽标[重复]

Posted 2023-03-06

【中文标题】CSS：将标题中的渐变背景与图像结合为徽标[重复]

【英文标题】：CSS: combine gradient background in header with image as logo [duplicate]

【发布时间】：2017-05-07 01:10:01

【问题描述】：

我正在尝试使用这个渐变：

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 的工作不多，因此我没有更多的想法来实现它。

【参考方案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>