background的使用
来源:互联网 发布:淘宝818会有活动吗 编辑:程序博客网 时间:2024/06/08 07:19
- 将容器的高度固定(410px)
- 将轮播图改为背景显示
- 由于可能图片的高度不一定是410px
所以需要设置css3中的background-size
background-size的使用
-length :
background-size:100px 100px 将背景图片固定到什么大小
-percentage:
background-size:90% 90% 以百分比的形式设置图片的大小
-cover:
+背景图片等比例缩放
让背景图片铺满整个窗口- 如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是300*600
- 因为背景图的较小边为100,将100放大到目标容器300的宽度,放大了3倍,最终结果300*600
-contain: - 1.背景图片等比例缩放
- 2.让背景图相对较大边放大到目标容器大小结束
- 如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是200*400
- 因为背景图的较大边为200,将200放大到目标容器400的高度,放大了2倍,最终结果200*400
contain可能会出现空白
- 因为背景图的较小边为100,将100放大到目标容器300的宽度,放大了3倍,最终结果300*600
- 如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是300*600
阅读全文
0 0
- background-clip和background-size的使用
- background-position的使用
- background的使用
- background-size的使用例子
- -webkit-background-size的使用
- CSS中background-position的使用
- background-clip使用
- 关于background-image的一些使用心德和疑问!
- [iPad WebApp]使用background和opacity的区别
- androidannotations的background和UiThread配合使用参考
- 使用JavaScript的Canvas模拟CSS3中的background-size:cover;
- js中使用background-size等带“-”的css样式
- 如何使用jquery 动态修改元素的 background-image?
- android中ImageView的属性使用之src和background
- background和background-Color的区别
- background 与background-image的区别
- background和background-Color的区别介绍
- background和background-Color的区别
- Android百度地图实例详解之仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录,导航等)
- JS中的DOM
- JDK并发包中的线程池(一)
- SpringMVC学习笔记(含案例分析)
- 5.1 线性相位FIR滤波器的特性
- background的使用
- windows 信号量
- java基础学习一
- 宽度优先爬虫
- STM32F4的窗口看门狗WWDG
- Learning Ros For Robotics Programming2学习(一)
- large margin-人脸识别
- 从高考到程序员之毕业流水帐
- 【Qarth框架系列】事件系统