zoukankan      html  css  js  c++  java
  • css怎样让背景充满整个屏幕

    HTML
      <!doctype html>
    <html>
    <body>
    ...Your content goes here...
    </body>
    </html>

      给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。
      其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
      CSS body标签的样式如下:
      body {
    /* 加载背景图 */
    background-image: url(images/background-photo.jpg);

    /* 背景图垂直、水平均居中 */
    background-position: center center;

    /* 背景图不平铺 */
    background-repeat: no-repeat;

    /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
    background-attachment: fixed;

    /* 让背景图基于容器大小伸缩 */
    background-size: cover;

    /* 设置背景颜色,背景图加载过程中会显示背景色 */

    }

      上面最重要的一条就是:
      background-size: cover;

      这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高(在上面的例子中,就是body标签)。
      这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。都知道,当把一个图片拉伸时,图片会变模糊。
      因此,在选择背景图时,要特别注意尺寸。为了照顾到大尺寸屏幕,demo里用的图片尺寸为5498px * 3615px 。
      同时,为了让背景图始终相对于viewport居中,声明了:
      background-position: center center;

      上面的规则会把背景图缩放的原点定位到viewport的中心。
      接下来需要解决的问题是:当内容的高度大于viewport的高度时,会出现滚动条。希望背景图始终相对于viewport固定,即使用户滚动时也是一样。
      解决办法就是:
      background-attachment: fixed;
  • 相关阅读:
    C++ 获取图片文件信息
    java中redis的分布式锁工具类
    java中的redis工具类
    mysql中的sql查询优化
    利用Linux中的crontab实现分布式项目定时任务
    MYSQL的REPLACE和ON DUPLICATE KEY UPDATE使用
    redis学习三,Redis主从复制和哨兵模式
    redis学习五,redis集群搭建及添加主从节点
    String 转化成java.sql.Date和java.sql.Time
    SpringMVC配置双数据源,一个java项目同时连接两个数据库
  • 原文地址:https://www.cnblogs.com/upupRabbit/p/9183945.html
Copyright © 2011-2022 走看看