HTML |使用 CSS 的响应式整页图像

响应式网页设计 (RWD)是一种设计策略，旨在应对移动设备浏览网页的惊人流行。响应式图像是响应式网页设计 (RWD) 的重要组成部分，
响应式网页设计是一种新的网站设计方法，可确保用户无论使用何种类型的设备都能获得良好的浏览体验。
网页设计师 Ethan Marcotte 创造了“响应式设计”这个词。 2010 年，他在 A List Apart 上发表了一篇文章，讨论了设备、浏览器、屏幕尺寸和方向的快速变化环境。为每种类型的设备建立单独的站点是不可持续的。相反，他提出了一个替代概念：响应式设计，它要求构建适应几乎任何屏幕的灵活流畅的布局。

开发人员使用多种框架来使网页具有响应性。

• 引导程序
• 基础
• 纯的
• 骨骼
• 赛曼蒂克

响应式整页背景图像根据用户的视口自行缩放。有几个网站使用这种效果，例如-

• Sailingcollective.com
• Sailingcollective.com
• 柏林房地产

可以使用 CSS 轻松地将这种整页背景图像效果添加到网页中。
示例实现
输入
HTML

    
    


    
Hi GFG

 

CSS

body {
    /* Image Location */
    background-image: url("../img/Fall-Nature-Background-Pictures.jpg");
  
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    /* Font Colour */
    color:white;
}

解释
背景尺寸：封面；
该属性告诉浏览器按比例缩放背景图像，使其宽度和高度等于或大于元素的宽度/高度。
背景位置：居中；
以上将缩放轴设置在视口的中心。
背景附件：固定；
背景相对于视口是固定的
输出
输出显示不同视口中的背景图像。