CSS中背景图片的属性:background-repeat、background-position、background-size
来源:互联网 发布:神硕微营销软件怎么样 编辑:程序博客网 时间:2024/04/18 10:42
背景图片的各种属性:
1、background-repeat:设置图片平铺方式。有三个属性:no-repeat(图片保留自身大小不平铺)、repeat-x(图片在水平方向上平铺)、repeat-y(图片在垂直方向上平铺)
2、background-position:确定图片显示的位置。
background-position: 30px 50px; 图片在水平方向上向右偏移30px,在垂直方向上偏移50px
background-position: right bottom; 图片显示在右下角
background-position: center; 图片显示在中间
background-position: right top; 图片显示在右上角
background-position: left bottom; 图片显示在左下角
background-position: center top; 图片显示在上中间
3、background-size:背景图片的大小
background-size: 100% 100%; 背景图片的大小
background-size: contain; contain:图片宽高等比例缩放,直到宽或高填满父布局,有可能出现布局填充不完整。
background-size: cover; cover:图片宽高等比例缩放,直到较小的宽或高填满父布局,可能出现图片溢出。
代码示例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div{ height: 400px; border: 1px solid red;/*1px的红色实线*/ background-color: blue; background-image: url("../../img/lianxiang.jpg"); background-repeat: no-repeat;/*1、no-repeat 图片保留自身大小,不平铺 2、repeat-x 水平方向上图片平铺 3、repeat-y 垂直方向上图片平铺*/ background-position: center top; /*background-size: 100% 100%;*/ /*背景图片的大小*/ /*background-size: contain;*//*contain:图片宽高等比例缩放,直到宽或高填满父布局,有可能出现图片填充布局不完整*/ background-size: cover; /*cover:图片宽高等比例缩放,直到较小的宽或高填满父布局,可能出现图片溢出*/ } </style> <title>背景图片</title></head><body><div></div></body></html>
代码运行结果:
阅读全文
0 0
- CSS中背景图片的属性:background-repeat、background-position、background-size
- CSS中背景图片位置属性background-position
- CSS background-repeat 属性
- CSS background-repeat 属性
- CSS background-repeat 属性
- CSS background-repeat属性
- css中background-size属性
- CSS中background-size的cover属性
- CSS background-size属性
- CSS background-position 属性
- CSS background-position 属性
- CSS background-position 属性
- CSS background-position 属性
- CSS background-position属性
- css背景图片的位置:background的position
- css背景图片的位置:background的position
- CSS定位背景图片 background-position
- CSS background-repeat 属性示例
- 华中农业大学第五届程序设计大赛 CFriends [树形dp]【动态规划】
- BZOJ 2599: [IOI2011]Race
- 从数据库获取到的多个点(有具体的经纬度),显示在百度地图上
- 集合
- 计算机网络--TCP报文首部URG与PSH的区别
- CSS中背景图片的属性:background-repeat、background-position、background-size
- 对js闭包的理解
- 22 Select2 多选框问题
- SpringMVC <mvc:view-controller path=""/>标签
- php数据库操作
- php中的spl
- 常用工具
- listview的多条目加载的适配器
- PHP编程效率的20个要点