CSS盒子模型与背景图片
来源:互联网 发布:模拟电路软件 编辑:程序博客网 时间:2024/05/12 11:22
——她那么美丽,也不及你的笑
从背景图到 BOX MODEL
盒子模型听过很多次了,刚开始也马马虎虎看过,遗忘曲线不是闹着玩儿的。
今天我试着给一段文字加上背景图,有那种好看的背景图,文字看起来也很美的。
<div class="boxdemo"> <p>一段简单的文字,如果它平淡无奇,还让你心起波澜,请你别忘了,就算是淡如水,也够味儿。</p></div>
这是一个div demo,之后我要给这个div加上一些属性了。
CSS规范里写的顺序,能用就用上,规范之所以为规范,是有道理的,就算你还不懂,道理还在,领悟就是了。
/*大小,文字系列,背景,其他*//*一次性写background也很舒服,*/.boxdemo { margin: 10px; padding: 10px; background: #eee url(1.jpg) no-repeat;}
盒子模型:http://www.cnblogs.com/linjiqin/p/3556497.html
图片贴起来不方便,这个讲的就是盒子模型。
看完了吧,其实前面的代码还是可以有个背景的样子
加个border吧
.boxdemo { margin:10px; border:5px solid #aaa; /*border写在这里可以吗?*/ padding: 10px; background: #eee url(1.jpg) no-repeat;/*border应该挨着background吗?*/}/*这次有了边框吧*/
确实是个盒子了,可是背景图很糟糕。图片很小(十几kb左右)
浏览器缩放时,盒子会有宽窄变化,图片却纹丝不动:
浏览器放大,盒子长而窄,图片左上角在内容区域里,右边是背景色#eee;
浏览器缩小,盒子瘦高,图片左侧一小部分在内容区域里,而下方是背景色#eee;
没错,就是背景的问题,盒子已经有了,现在去找背景的问题。
/* 讲background的事情 在一个声明中设置所有背景属性 (我查资料:其实最多五个,剩下的还是要单独写才有效)*/background: #eee url(1.jpg) no-repeat;
这三个分别是 background-color: background-image: url(path) background-repeat: repeat/no-repeat/repeat-x/repeat-y//path无需加引号//repeat按xy方向还是no可设置的五个属性里还有两个 background-attachment: fixed/scroll; background-position://背景图片固定或是随着页面滚动//position的取值//1. top/bottom/center left/right/center 如果只规定了一个关键词,那么第二个值默认为"center"//2. x% y% 水平和垂直,左上角是0% 0% ,右下角是100% 100% 如果只规定了一个值,另一个默认为 50%//3. xpos ypos 同2可以混用
可见这些属性都没有提到背景图片自适应框的大小的。
w3c有的介绍很全了,注意到
background-size /*规定背景图片的尺寸*/ /* length: 80px 80px ,第二个值缺省默认auto percentage:以百分比设置,同length cover: 把背景图片扩展至足够大,以使背景图像完全覆盖背景区域。也许会导致背景图片的某些部分无法显示在背景定位区域中。 contain:把背景图片扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 */
这里要注意了,cover和contain的区别就在于
contain使图片始终在内容区域内,并不一定完全占满内容区域
cover完全占满内容区域
所以,在
.boxdemo { margin: 10px; border: 5px solid #aaa; padding: 10px; background: #eee url(1.jpg) no-repeat; /*important*/ background-size: cover;}
这次,背景图片算是入我的眼了。
但是老动我就不想看了,固定大小一般是强硬的。
.boxdemo { width: 300px; min-height: 200px; margin: 10px; border: 5px solid #aaa; padding: 10px; background: #eee url(1.jpg) no-repeat; /*important*/ background-size: cover;}/*宽度设定,高度最小为200px*/
0 0
- CSS盒子模型与背景图片
- CSS:盒子模型与定位
- css标准盒子模型与IE盒子模型
- CSS之盒子模型与面向对象
- CSS的盒子模型与布局
- CSS笔记(盒子模型与浮动)
- css盒子模型与div浮动详解
- CSS框模型(盒子模型)padding与border属性
- 理解CSS盒子模型
- 盒子模型 css
- css盒子模型
- CSS盒子模型
- CSS核心--盒子模型
- CSS核心--盒子模型
- CSS盒子模型
- CSS盒子模型
- DIV+CSS盒子模型
- CSS盒子模型
- 主题:免费的论文查重网站 正文:推荐一个免费的论文查重网站PaperFree:http://www.paperfree.cn
- Atitit.js this错误指向window的解决方案
- Math.floor,Math.ceil,Math.rint,Math.round用法详解
- 在ubuntu下安装lamp(linux+apach+mysql+php)
- Opencv 绘图函数
- CSS盒子模型与背景图片
- 理工 58题 最少步数
- 主从DB与cache一致性
- javascript实现轮播图
- 构造函数与析构函数举例
- 机器学习实战--CART
- ceilometer-alarm-notifier/evaluator服务的初始化和启动
- 算法和数据结构学习笔记
- BZOJ3306树