html - 如何使用 css 重新定位具有线性渐变的图像？

Question

我正在尝试使用线性渐变将图像居中。但图像要么消失，要么梯度发生变化。

我试过使用 float: left; 将图像放入 Html 文件的 div 容器中，然后添加渐变，但如果我这样做，渐变不会不显示。

   width:750px;

   height: 1300px;

   background: linear-gradient(to top,black,transparent 30%), url(/images/ian-dooley-iD5aVJFCXJg-unsplash-750x1300.jpg) no-repeat;

我希望能够在我的网站上居中或移动我的图像，同时保持渐变叠加。

任何帮助将不胜感激

Answer 1

background-position: 0px 0px;
background-image: linear-gradient(to bottom, 
    #FFFFFF 0px,     /* Have one solid white area */
    #FFFFFF 255px,   /* at the top (255px high). */
    #C4C7C9 255px,   /* Then begin the gradient at 255px */
    #FFFFFF 100%     /* and end it at 100% (= body's height). */
);

另请参阅链接，这一定会对您有所帮助 http://jsfiddle.net/ExpertSystem/yyvT3/