目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV
首先我们需要让背景图片在指定的DIV中全部填充显示
之前看有用类似 background-attachment: 的fix来实现背景图片的填充,但是,貌似是不能按照当前的DIV大小去填充。
我的情况是,宽度按照整个屏幕的百分比来调整,但是高度,又不能通过整个屏幕的高度百分比来调整,而也想通过宽度的百分比,即宽高比希望与背景图片的宽高比相等。
通过一下属性,先填充
background-size: 100% auto;
background-repeat: no-repeat;
background-image: url(../images/aaa.png);
然后通过对这个div的before添加样式
content: "";
display: block;
padding-top: 100%; /* 代表1:1,如果是想要5:1就是20%,根据图片大小比例,那就自己算一下吧*/
这块实际上做的就是用before占用一块位置,把相应的高度撑起来~
然后里面就可以放任何东西了,当然,里面的东西要保持
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width:100%;
height:100%;
同时,上一层的position要是relative的,这样就可以保证,里面的内容刚刚好在背景图片这个区域了
分享到:
相关推荐
这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
CSS3的background-size属性,实现响应式式图片等比例缩放。告别了考虑各种兼容性物理像素的烦恼。
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
CSS实现图片按固定大小等比例缩放,保证大图片按照 比例缩放到合适。
纯DIV+CSS做的三种图片滚动,轮播图片 1.2.3.4图片切换 电子相册
CSS3鼠标hover背景图片实现缩放动画效果.zip
DIV CSS 图片自动换行 图片带鼠标效果
css div缩放效果
纯CSS控制DIV背景透明效果,没有什么好解释的,代码全在文件里面,直接预览或者用记事本打开即可。rgba参数(red,green.,blue,alpha),alpha值0-1 ie滤镜参数#3363370b,前两位为16进制透明度, 比如说值是上面用到的...
纯css实现高按照宽比例缩放,本例子,适用与图片、视频 16/9格式,具体计算公式可根据注释内公式进行计算
DIV+CSS 图片垂直居中效果
用Javascript+CSS+DIV实现的选项卡,非常不错,有横排选项和竖排选项两种可供参考,内涵了简单的CSS和JS脚本,并以DIV层展示。
New Document ul{ list-style:none; } a{ padding-left:1.5em;font-size:12px;height:23px;line-height:23px;color:gray;text-decoration:none;... background:url(/article/upimages/bbs_bg_off.gif);...
第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用...
CSS+DIV结合的特效 DIV_CSS图片滚动效果
漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...
div css练习
DIV_CSS图片缩略显示 DIV_CSS图片缩略显示 DIV_CSS图片缩略显示
纯CSS3鼠标经过按钮背景填充动画特效
div _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _css