用線性漸變着色后將圖像放置在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>