html+CSS让背景图片充满整个屏幕

由于给网页设置背景图时，需要设置背景图不重复且充满整个浏览器屏幕。

    给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。

     其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。

   可设置body标签的CSS样式如下：

   body{

    /*加载背景图*/

     background-image：url（./images/background.jpg）;

     /* 背景图垂直、水平均居中 */

    background-position: center center;

    /* 背景图不平铺 */

    background-repeat: no-repeat;

    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */    background-attachment: fixed;  //此条属性必须设置否则可能无效/

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

   /* 设置背景颜色，背景图加载过程中会显示背景色 */   background-color: #CCCCCC;

或简写为如下CSS样式：

  body{

   background:url(./images/background.jpg)  no-repeat center center;

   background-size:cover;

   background-attachment:fixed;

   background-color:#CCCCCC;

html+CSS让背景图片充满整个屏幕相关推荐

CSS设置背景图片撑满屏幕
方法一: position: fixed;left: 0;top: 0;width: 100%; height: 100%; background: url(../../assets/mask-bg. ...
css背景图不失真_html css 中非常经典的背景图片充满屏幕且不变形问题
要求: 图片尺寸任意,图片宽高比任意(意思就是随便拿张图片都得ok),渲染后不可变形图片中心与可视区中心重合图片充满整个屏幕自适应屏幕宽高变化给图片上一层蒙版,便于在其上渲染文字思路分析: ...
CSS网页背景图片等比例占满整个页面的解决方案
需求是这样的: 一个登录界面,让一张背景图片充满整个页面.需求看似非常简单,可是测试人员提的一个bug引起了我深入的思考.先上图,正常界面是这样的: 界面结构很简单,一个登录框,加一张背景图.我们都知 ...
CSS让背景图适应整个屏幕（填满）
html代码如下 <body>/*此处内容省略*/</body> 使用css设置背景图片并且铺满整个屏幕(不重复),代码如下 body{/*设置背景图片*/background ...
css实现背景图片自动适应
css实现背景图片自动适应 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
php设置背景图片的代码,css设置背景图片如何实现？（代码实例）
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
css样式教程---css控制背景图片-背景相关的css
最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大, ...
background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
php背景图片存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...

html+CSS让背景图片充满整个屏幕

html+CSS让背景图片充满整个屏幕相关推荐

最新文章

热门文章