https://blog.csdn.net/coslay/article/details/47109281

腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码实现的。先不说要调用jq库拖慢了网页的打开时间,而且对于兼用性不好。

前几天用CSS研究出相同效果的样式代码。无论图片多大都能根据屏幕变化(当然图片尺寸越大越好)。而且在拉动网页窗体大小时会自动调节图片大小,实时交互。效果上图看不了。在这里放个连接,

CSS 代码如下:

#background
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #211f1f;
display:none\8;
}
#background .bg-photo
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
overflow: hidden;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
} #background .bg-photo-1
{
background: url('../image/alone.jpg') no-repeat center center;
} #background-ie {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #211f1f;
}

HTML代码如下:

<div id="background">
<div class="bg-photo bg-photo-1" style="display: block;"></div>
</div>

html 网页背景图片根据屏幕大小CSS自动缩放的更多相关文章

  1. css -- 背景图片自适应屏幕大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  2. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  3. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  4. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  5. 【CSS】css网页背景图片设置

    刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...

  6. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  7. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

  8. CSS网页背景图片等比例占满整个页面的解决方案

    想做一个个人展示类的网站首页,用整张图片来当背景,浏览器窗口放大缩小时背景图片不会变形,需要用到分层来实现其他功能,就用DIV来实现了 #bodycontainer { width:100%; hei ...

  9. background--详解(背景图片根据屏幕的自适应)

    background:有以下几种属性: background-color background-position background-size background-repeat backgroun ...

随机推荐

  1. git基本操作1

    1.创建版本库 在文件夹下,打开Git Bash Here ,然后执行git init,文件夹中会多出.git文件夹.(.git可能是隐藏的) 2.创建a.txt vim  a.txt ,并添加到版本 ...

  2. uname -r查询版本不是安装的版本的问题

    uname -r 查出来的版本与/lib/modules下面的内核版本不匹配.啥原因? 第一步,先strace uname -r看看这个uname -r到底从哪里获取的版本. strace没有看出来 ...

  3. echo "" > 和 echo "" >> 的区别

    在写shell脚本中,如果判断一个文件已经存在,但希望重写这个文件,一般用如下方式 echo "" > file.txt 这个表示清空文件的内容,如果使用 echo “” & ...

  4. 莫烦theano学习自修第十天【保存神经网络及加载神经网络】

    1. 为何保存神经网络 保存神经网络指的是保存神经网络的权重W及偏置b,权重W,和偏置b本身是一个列表,将这两个列表的值写到列表或者字典的数据结构中,使用pickle的数据结构将列表或者字典写入到文件 ...

  5. Spring Boot 构建电商基础秒杀项目 (十二) 总结 (完结)

    SpringBoot构建电商基础秒杀项目 学习笔记 系统架构 存在问题 如何发现容量问题 如何使得系统水平扩展 查询效率低下 活动开始前页面被疯狂刷新 库存行锁问题 下单操作步骤多,缓慢 浪涌流量如何 ...

  6. java web 开发入门 --- tomcat/servlet/jsp

    在做java web 开发时,要先安装tomcat.它是一个web服务器,也叫web容器,我们把写好的jsp, html页面放到它里面,然后启动它,就可以用浏览器访问这些页面,地址栏中输入localh ...

  7. [洛谷日报第62期]Splay简易教程 (转载)

    本文发布于洛谷日报,特约作者:tiger0132 原地址 分割线下为copy的内容 [洛谷日报第62期]Splay简易教程 洛谷科技 18-10-0223:31 简介 二叉排序树(Binary Sor ...

  8. pycharm pip 源修改以及包管理(转载)

    转载自(https://www.u3v3.com/ar/1352) pycharm下如何将默认的pip源改成国内能快速访问的源, 以及如何进行包管理 pycharm 是一款进行python项目开发的利 ...

  9. ElasticHD Windows环境下安装

    ElasticHD Linux环境下安装教程        ElasticHD windows环境下安装教程   习惯了T-SQL 查询,Elasticsearch的DSL查询语法简直就是反人类呀,一 ...

  10. Android短信大全

    使用ListView实现点击条目跳转短信界面,并将内容传至短信页面: 代码如下:activity_main.xml: <?xml version="1.0" encoding ...