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%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- source insight编辑matlab,不可
先说结论,我用的source insight版本是4.0x,matlab的语言包用的sourceinght官网提供的matlab.clf.链接如下:https://www.sourceinsight. ...
- 常被问到的八个 Java 面试题
想要找到一份好的工作,面试是少不了的,可能你觉得自己技术应该不错了,但是面试却是一团糟.下面我收集了八个常常被问到的Java面试题. 1. 阐述 Java 7 和 Java 8 的区别. 实话说, ...
- C语言如何动态分配二维数组
C语言如何动态分配二维数组(转载) 原文链接:https://www.cnblogs.com/0xWitch/p/9314621.html 使用malloc().free()函数进行动态分配,这两个函 ...
- route和过滤器的基础知识
过滤器 1.局部过滤器 在当前组件内部使用过滤器(对某些数据进行装饰) //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是will ,val就是当前的数 ...
- 30年技术积累,技术流RTC如何成为视频直播领域的黑马?
摘要:视频业务链的背后,本质是一张视频处理和分发网络.5G+云+AI时代下,实时音视频必然会步入到一个全新的发展期. 2020年这场肆虐全球的新冠疫情让很多企业重新审视自己对数字化的认识,正如 “大潮 ...
- PJSIP开发指南-第二章
一.模块 2.1 模块框架 模块框架的主要作用是在应用程序组件之间分发SIP消息,PJSIP的所有的组件,包括dialog和transaction都是以模块方式实现的,没有模块,核心协议栈将不知 ...
- RabbitMQ配置文件(advanced.config)
这是advanced.config配置文件示例: [ %% ------------------------------------------------ --------------------- ...
- Android开发工程师面试题之handler详解。android程序员,android开发面试资料,详解
Message:消息:其中包含了消息ID,消息对象以及处理的数据等,由MessageQueue统一列队,终由Handler处理 Handler:处理者:负责Message发送消息及处理.Handler ...
- HDU-4417-Super Mario(线段树+离线处理)
Mario is world-famous plumber. His “burly” figure and amazing jumping ability reminded in our memory ...
- 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码
VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...