前端学习笔记(4)之css背景属性合集
2020-07-23 20:18
513 查看
背景模块
- 背景颜色background-color
- 背景图:background-image:url();
- 背景图平铺状态:background-repeat:;
- 背景图的位置:background-position:;
- 背景图大小background-size
- 背景图的固定background-attachment
- 背景的简写属性background
背景颜色background-color
默认情况下背景颜色会延伸到border的区域,把border设置成点状可观察。
背景图:background-image:url();
容器>背景图 : 背景图平铺,直到铺满,显示多张背景图
容器=背景图 : 只显示一张
容器<背景图 : 只显示背景图的一部分
背景图平铺状态:background-repeat:;
no-repeat 只铺一张背景图
repeat-x 横向平铺
repeat-y 纵向平铺
repeat 双方向直到铺满
背景图的位置:background-position:;
用来设置背景图片的位置。容器内就相当于九宫格内选择位置。
设置方式:
通过top left right bottom center 几个表示方位的词来设置背景。至少两个值。如果只写一个值,第二值默认是center。
background-position:center center; 表示九宫格中间。
background-position:bottom right 表示九宫格右下角
也可以通过像素来设置:
background-position:10px 100px ;(水平方向偏移量 垂直方向偏移量)
把左上角当做原点,上边框是x轴,左边框是y轴。(一般用到负值更多)
背景图大小background-size
background-size 设置图片的尺寸
可选值:
width height 如果只写一个 第二个值默认auto。
cover 图片比例不变,将元素铺满
contain 图片比例不变,让图片在元素中完整显示
背景图的固定background-attachment
- 设置背景图片是否跟随元素移动
- 可选值:
scroll 默认值,背景图片会跟随元素移动
fixed 背景会固定在页面中,不会随元素移动
背景的简写属性background
示例:
background: red url() no-repeat left center;
相关文章推荐
- 学习笔记(13):HTML+CSS前端基础开发视频教程-文本控制属性
- CSS从基础到熟练学习笔记(三)CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)
- 【Web前端笔记】css让背景图片拉伸填充的属性
- web前端基础CSS初识学习笔记(11)简单实例之插入图片与背景图片区分及用法
- 前端学习记录7-CSS(标签显示模式,背景属性样式)
- CSS学习笔记之背景属性
- 学习笔记(12):HTML+CSS前端基础开发视频教程-文字属性
- 【前端学习笔记】CSS属性position以及各个属性值详解,及清除浮动的方法
- 前端学习笔记(5)之表格table的css属性补充
- Python笔记day49(前端|CSS)|伪类、伪元素选择器、文字、背景属性、边框、浮动、定位
- Web前端基础CSS初识学习笔记(7) 善用选择器之超详细大合集
- 前端学习笔记二:CSS(3)常用的文本属性+让div飞~
- WEB前端学习:CSS学习_CSS背景图片相关属性
- 前端学习笔记(11)之过渡属性(transition)详解
- WEB前端学习笔记-CSS基础教程
- 学习笔记之CSS(二、背景和盒子)
- 前端学习笔记2-3 CSS
- 【HTML5学习笔记】24:CSS背景
- CSS学习笔记之边缘属性和简单的布局
- CSS学习笔记11 CSS背景