用户登录

在这个英雄区的上面,除了这些文字内容,还会显示一个大的图像 .. 打开项目的 index.html .. 找到 hero 区域 ..

把图像放在 item 这个包装的里面 ... 让它跟这个 content 是兄弟元素 ..

可以直接使用一个 img 标签 .. 上面加上一个类,可以是 image ..

src 是图像的位置,在项目的 images 里面,有个图像文件 ..

回到 hero 样式 ... 可以使用 image 类作为英雄区上的图像元素的样式选择器 ..

用一个 width ,把它的值设置成 100% .. 这样图像的宽度会根据它的包装容器的宽度的变化而变化 ..

再用一个 position 属性,值是 absolute ,绝对定位 ..

这个绝对定位要相对一个位置 .. 找到 item ,把这个容器的 position 属性的值设置成 relative .. 让图像相对于这个元素绝对定位 ..

再用一个 overflow: hidden ,把溢出的部分隐藏起来 ..

再找到这个 image .. top 设置成 0 ,bottom 也设置成 0 ,然后再把 margin 的值设置成 auto ..

到浏览器上预览一下 ..

调整窗口的宽度 ... 你会发现,这个英雄区上的图像,会响应窗口的宽度 ...

英雄区:响应式背景图像《 网页设计案例:英雄区 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点