html 网页背景图片根据屏幕大小CSS自动缩放
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自动缩放的更多相关文章
- css -- 背景图片自适应屏幕大小
由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- 【CSS】css网页背景图片设置
刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...
- 用CSS让网页背景图片居中的方法
网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...
- css 背景图片自适应元素大小
一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...
- CSS网页背景图片等比例占满整个页面的解决方案
想做一个个人展示类的网站首页,用整张图片来当背景,浏览器窗口放大缩小时背景图片不会变形,需要用到分层来实现其他功能,就用DIV来实现了 #bodycontainer { width:100%; hei ...
- background--详解(背景图片根据屏幕的自适应)
background:有以下几种属性: background-color background-position background-size background-repeat backgroun ...
随机推荐
- Excel文件读取的两种方式
1.Pandas库的读取操作 from pandas import read_excel dr=read_excel(filename,header) dr#dataframe数据 dw=DataFr ...
- ansible的playbook简单使用
一.介绍 playbook就是一个用yaml语法把多个模块堆起来的一个文件 核心组件: Hosts:执行的远程主机列表Tasks:任务,由模块定义的操作的列表:Varniables:内置变量或自定义变 ...
- ServiceLoader详解
系统中用到了ServiceLoader,查了一下: ServiceLoader与ClassLoader是Java中2个即相互区别又相互联系的加载器.JVM利用ClassLoader将类载入内存,这是一 ...
- DAY01、计算机组成及操作系统
一.编程与编程的目的: 1.什么是语言?什么是编程语言? 语言是一事物与另一事物之间沟通的介质 编程语言就是程序员与计算机之间沟通的介质 2.什么是编程? 程序员把自己想要让计算机做的事用编程语言表达 ...
- jQ append 添加html 及字符串拼接
如图,我要拼接这样一段html: 点击下边添加按钮,不断添加这段Html html: <div class="x_addtable"> <div class=&q ...
- JavaScript之Json的使用
Json字符串转JavaScript对象 <html> <body> <h3>通过 JSON 字符串来创建对象</h3> <p> First ...
- FTC诉高通垄断案苹果从中受益
据外媒报道,美国当地时间周二,美国联邦贸易委员会(FTC)诉芯片制造商高通公司(Qualcomm)垄断案进入了终结辩论阶段.这意味着,这起审判也进入最后阶段,它可能颠覆高通在智能手机时代取得成功的至关 ...
- 【数学建模】day04-插值与拟合
关于插值原理,这篇文章里总结过. 插值,是在有限个数据点的情况下,模拟出更多的点来适应实际问题的需要. 拟合,是在已知数据点基础上,以已知点处最小误差为标准,模拟出近似函数. 二者有似,实则不同,ma ...
- Going Home POJ - 2195(费用流)
就是一个简单题 四个月前a的一道题,今天又看到了,再a一遍吧. 好吧 我想多了 用了bfs求最短路 其实不用的 因为没有障碍物 #include <iostream> #include ...
- bzoj 3631 松鼠的新家 (树链剖分)
链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3631 思路: 直接用树链剖分求每一次运动,因为这道题只需要区间增添,单点求值,没必要用线段 ...