我正在尝试使用线性渐变将图像居中。但图像要么消失,要么梯度发生变化。
我试过使用 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;
我希望能够在我的网站上居中或移动我的图像,同时保持渐变叠加。
任何帮助将不胜感激
最佳答案
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/
关于html - 如何使用 css 重新定位具有线性渐变的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57517948/