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

标签 html css image

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

我试过使用 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/

相关文章:

css - 如何围绕另一个正在移动的元素的中心旋转 svg 元素?

php - 如何使用 jquery imgAreaSelect 使用 php 裁剪图像?

php - Cakephp通过foreach在表内单选输入

firefox - 渲染 HTML5 动画服务器端?

html - CSS中两个元素之间的重叠

html - 我如何让 img 元素在 CSS 中的背景图像下呈现

php - 如何缓存由php生成的图像

html - 无论每张表格的内容如何,​​如何制作相同大小的表格?

html - 元素被推出 anchor

css - 如何从 Bootstrap 覆盖 img-width?将 css 规则设置为空?