HTML |使用CSS的响应性完整页面图像-yiteyi-C++库

响应式网页设计（RWD） ，这是一种设计策略，旨在应对浏览网页的移动设备的惊人普及。响应性图像是响应性网页设计（RWD）的重要组成部分，响应式网页设计是一种新的网站设计方法，确保用户无论使用何种设备都能获得良好的浏览体验。网页设计师伊桑·马科特创造了“响应性设计”这个词2010年，他在一份清单上发表了一篇文章，讨论了设备、浏览器、屏幕大小和方向等快速变化的环境。为每种类型的设备建立单独的站点是不可持续的。相反，他提出了另一个概念：响应式设计，它要求构建灵活、流畅的布局，以适应几乎任何屏幕。

null

图片[1]-HTML |使用CSS的响应性完整页面图像-yiteyi-C++库

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

独自创立
地基
纯净的
骨骼
赛门铁克

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

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

HTML

                           <!DOCTYPE html>                         
                           <                                        head                                        >                         
                                                     <                                        link                                        rel="stylesheet" href="css/main.css">                         
                                                     <                                        title                                        >Responsive Background Example</                                        title                                        >                         
                           </                                        head                                        >                         
                           <                                        body                                        >                         
                                                     <                                        h1                                        >Hi GFG</                                        h1                                        >                         
                           </                                        body                                        >                         
                           </                                        html                                        >                         

CSS

HTML

                           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;                         
                           }                         