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中

1 个答案: