Background背景属性
Background背景属性
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
1、背景颜色
源代码
background-color:颜色值; background-color属性定义了元素的背景颜色,有预定义的颜色值(red, blue, yellow)、十六进制(#FF0000, #FF6600,#29D794)、RBG代码(rgb(255,0,0)或rgb(100%,0%,0%)),一般情况下元素背景颜色默认值为transparent(透明),我们也可以手动指定背景颜色为透明色
1.1、背景渐变
源代码
语法:
background: linear-gradient(起始方向,颜色1,颜色2,...);
background: -webkit-linear-gradient(top,red,blue);
background: -webkit-linear-gradient(top left,red,blue);
背景渐变必须添加浏览器私有前缀
起始方式可以是:方位名词 或者 度数,如果省略默认就是top
2、背景图片
源代码
background-image:url(图片路径); background-image属性描述了元素的背景图像,url属性值为使用绝对或相对地址指定背景图像,none属性值为无背景图(默认的)
3、背景平铺
源代码
background-repeat: repeat属性值; background-repeat属性对背景图像进行平铺,repeat属性值为背景图像在纵向和横向上平铺(默认的) ,no-repeat属性值为背景不平铺,repeat-x属性值为背景图像在横向平铺,repeat-y属性值为背景图像在纵向平铺
4、背景图片位置
利用background-position属性可以改变图片在背景中的位置
源代码
background-position: x y; background-position属性对背景图像中图片的位置进行调整,length参数值:百分数 | 由浮点数字和单位标识符组成的长度值,position参数值:top(上) | center(中) | bottom(下) | left(左) | center(中) | right(右) 方位名词,参数代表的意思是:x坐标和y坐标,可以使用方位名词或者精确单位,也可以两个混一起
参数是方位名词
- 如果指定的两个值都是方位名词,则这两个值前后顺序无关,比如left top 和 top left 效果一致
- 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
参数是精确单位
- 如果参数值是精确坐标,那么第一个肯定是x坐标,第二个肯定是y坐标
- 如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x坐标,第二个值是y坐标
5、背景图像固定(背景附着)
利用background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
源代码
background-attachment: ; background-attachment属性对背景图像进行固定或滚动,scroll属性值为背景图像随对象内容滚动,fixed属性值为背景图像固定
6、背景复合写法
利用background属性简写部分背景属性值
源代码
background: color image repeat position attachment; background属性为几个背景属性的简写,当写简写属性时,没有特点的书写顺序,一般习惯约定顺序为:background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
7、背景色半透明
CSS3为我们提供了背景色半透明的效果
background: rgba(0, 0, 0, 0);
- 最后一个参数是alpha透明度,取值范围在0~1之间
- 我们习惯吧0.3的0省略掉,写为background: rgba(0, 0, 0, .3);
- 注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响
- CSS3新增属性,是IE9+版本浏览器才支持的,但也可以放心使用
8、背景缩放background-size
源代码
background-size属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;
- 单位:长度 | 百分比 | cover | contain;
- cover把背景图片扩展至足够大,以使背景图像完全覆盖背景区域,两个值最后一个覆盖到就停止扩大
- contain把图像扩展至最大尺寸,以使其宽高完全适应内容区域,两个值有一个覆盖到盒子最大值就停止扩大
Background背景属性相关推荐
- 【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构 创建DIV <div class="div1">1 </div> 样式 widt ...
- background 背景属性详解
background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
- (15)css常用样式—background背景属性
一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修 饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...
- CSS 中的 background 背景属性命令大全
1.background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. 属性值 说明 scroll 背景图片随页面的其余部分滚动.这是默认 fixed 背景图像是固定的 in ...
- background 背景属性的简写
通常使用background 属性 都是如下写法: background: url(../images/stock_taking/branch.png) no-repeat right bottom ...
- html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
- Background 全属性实例图解(10种全)(一)
Background 全属性实例图解(10种全)(一) 本文目录: 一.background属性: (1).属性描述 (2).background属性使用示例 (3).background动画属性 ( ...
- CSS的基本概念及文字属性、段落属性、背景属性、列表案例符号的样式
一. CSS的基本概念 1.CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观.指颜色 背景 大小元素定位. Css选择器:css选择器,也称为选择符,用于选择需要 ...
最新文章
- 机器人控制与感知有感
- matlab if语句多个执行举例,初学Matlab,有两个语句,if语句和switch语句,有两个例子哪位大神能帮我讲讲...
- python小程序源代码-Python小项目:开发一个动态时钟小程序(附源码)
- 部署node_如何使用 docker 高效部署 Node 应用
- 铃铛计数问题 解题报告
- 高仿真机器人助力临床医学发展
- elastic-job控制台部署与使用
- BS 百度Blog的字节限制!!!!!!!!!
- Atitit.研发团队的管理原则---立长不立贤与按资排辈原则
- python音乐播放器图片_Python音乐播放器
- 【前端】虚拟键盘的简单运用
- unity shader - 毛发渲染,飘逸的毛发
- 用摄像管替换电视机电路里的显像管的摄像机
- 路由器设备升级SNMP日志
- 阵列信号处理仿真二——波束方向图的绘制
- 【YBT2023寒假Day10 B】随机游走(记忆化搜索)
- 测试家里网速用什么软件,家中宽带网速多少?教你测试小妙招
- ef mysql 约定_EF 数据库连接约定(Connection String Conventions in Code First)
- 3d打印机喷头出现堵丝问题
- mysql实现统计查询_MySQL 统计查询实现代码