用线性渐变着色后将图像定位在 div 中

Question

我有一张带有背景图片的 div。我用这样的线性渐变给这张图片着色：

background:      -webkit-linear-gradient(
  rgba(0, 0, 0, 0.3), 
  rgba(0, 0, 0, 0.9)
),
url("../img/pic.jpg");

现在我想移动图片，因为它的位置不是我想要的（我想向上移动一点）。我用

之类的东西试了一下

background-position: -200px 0px;

这会按照我想要的方式移动图像，但如果我将图片稍微移到顶部，它会给我一个未应用着色渐变的区域，即底部。

我可以在 photoshop 中编辑照片，但我想用 css 来完成。

可能吗？

Answer 1

你可以尝试在一些伪元素上添加渐变，试试这个：

div {
  position: relative;
  height: 300px;
  width: 300px;
  background: url("http://lorempixel.com/300/300") no-repeat;
  background-position: 20px 20px;
}
div:before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
}
h2 {
  position:relative;
  z-index:1;
  color:white;
  line-height:300px;
  text-align:center;
}

<div><h2>I'm Not Tinted</h2></div>

用线性渐变着色后将图像定位在 div 中

Positioning an image in a div after tinting it with linear gradient

html

css

background-position