CSS网页背景图片等比例占满整个页面的解决方案
想做一个个人展示类的网站首页,用整张图片来当背景,浏览器窗口放大缩小时背景图片不会变形,需要用到分层来实现其他功能,就用DIV来实现了
#bodycontainer {
width:100%;
height:100%;
min-width:973px;
min-heigth:584px;
background-image:url("love.jpg");
background-repeat:no-repeat;
background-size:cover;
}
重点在于background-size这一块,开始是用background-size:100% auto;这样解决了宽度问题,高度不OK,发现background-size:cover;可以实现我想要的。
但这个是CSS3的标准,也就是说新版本的浏览器可以实现,但不能包含所有,需要每个人根据需要再调整……
CSS网页背景图片等比例占满整个页面的解决方案的更多相关文章
- 【CSS】css网页背景图片设置
刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- 用CSS让网页背景图片居中的方法
网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)
目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- 区块链入门到实战(17)之以太坊(Ethereum) – 是什么
以太坊的作用:构建基于区块链的分布式应用. 以太坊是什么:可编程的虚拟币. 以太坊(Ethereum)是一个可编程的虚拟币,它是一个基于公共区块链的分布式计算平台,可用于构建基于区块链的分布式应用. ...
- vue的修饰符
v-on 缩写:@ 事件修饰符 .stop - 调用 event.stopPropagation(). //阻止冒泡 .prevent - 调用 event.preventDefault(). //阻 ...
- JS开发必须知道的41个技巧
JS是前端的核心,但有些使用技巧你还不一定知道:本文梳理了JS的41个技巧,帮助大家提高JS的使用技巧: Array 1.数组交集 普通数组 const arr1 = [, , , , , ,],ar ...
- Selenium使用cookis登录,并临时将cookis存储在本地【shelve数据库】
Python中自带了一个shelve库,可以帮助我们存储一些少量的数据. shelve数据库类似redis,是以[键值对]的方式进行数据的存储,有点像"字典"这种数据结构,存储在本 ...
- 笔记-Linux 内存优化
1.清理前内存使用情况 free -m2.开始清理 echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成! 查看内存条数命令: d ...
- 网址中的静态资源 public
客户端浏览器收到的HTML响应内容中如果带有 link img script video audio 等带有src或者href标签时候,这些都是外部链接资源请求url.浏览器会默认自动性的对这些资源 ...
- docker 停止、启动、删除镜像指令
容器 docker ps // 查看所有正在运行容器 docker stop containerId // containerId 是容器的ID docker ps -a // 查看所有容器 dock ...
- weekly-contest-205
weekly-contest-205 1 / 5507. 替换所有的问号 class Solution { public String modifyString(String s) { StringB ...
- Python3实现zip分卷压缩
Python实现zip分卷压缩 使用 zipfile 库 查看 官方中文文档 利用 Python 压缩 ZIP 文件,我们第一反应是使用 zipfile 库,然而,它的官方文档中却明确标注" ...
- Appium之常用API
Appium常用API解析 1.current_activity:获取当前页面的activity名,比如com.taobao.tao.TBMainActivity 或 com.taobao.brows ...