html - 如何让页面元素在屏幕尺寸不同时清晰显示固定到顶部的流体图像?

标签 html css

我有一个固定在页面顶部的流体图像 width: 100%。当用户向下滚动页面时,文本会在图像上滚动。查看此 jsfiddle 以获得 demo和我的 code .这就是我想要发生的事情。

我遇到的问题是当用户还没有滚动(即在页面加载时)并且浏览器是一定宽度时,图像没有被页面文本清除(页面文本与图像重叠)。如何确保我的页面文本在所有屏幕尺寸下都能清晰显示图像?

最佳答案

如果我没看错,你想在图像和文本之间设置一个间隙。当您使用 fixed 定位元素时或 absolute你从普通元素网格中取出它。如果你想在视觉上分离标题图像和文本,请添加 micro clearfix<content>并设置 padding-top它等于图像高度。参见 example

希望对您有所帮助!

关于html - 如何让页面元素在屏幕尺寸不同时清晰显示固定到顶部的流体图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23854157/

相关文章:

javascript - 单击“保存”按钮后如何重定向到同一选项卡

html - css背景图像仅在边缘

javascript - jquery 简单的 ul li 内容 slider

jquery - 我在使用 jQuery 显示和隐藏下拉菜单时遇到问题

jquery - 使用 jQuery 输入数组总和

html - 我怎么能在 CSS 媒体查询中说 "height < width"?

html - 不影响字体的全宽背景颜色

javascript - PHP更改个人资料图片

html - CSS自定义复选框不隐藏:after and :before elements

html - 如何使用线性渐变添加多个背景图像?