”图片背景“给谁加背景即选择谁作为选择器
background-image:url(图片路径); | 只有此一条代码,背景则会重复显示 |
background-repeat: no-repeat | 此条表示 只显示一张图片背景 |
background-repeat: repeat-x | 表示图片背景按水平排序 |
background-repeat: repeat-y | 表示图片背景按垂直排序 |
background-repeat: repeat | 默认值,全覆盖 |
background-color: rgba( 1/0 ); 格式:rgba(0,0,0,1) 前三位表示颜色,第四位表示是否透明 | 设置背景颜色的透明度 0表示全透明;1表示不透明 |
border-right-color: transparent; | 直接将颜色变为透明 |
background-size 背景图片的大小
百分比% | 两个值 表示 宽度 和 高度 |
像素px | 两个值 表示 宽度 和 高度 |
cover | 把图片扩展到足够大,使背景图像完全覆盖背景区域 |
contain | 把图像扩展到最大尺寸,使其宽度和高度完全适应内容区域 |
背景图像的位置 px
主要定位于左上角
background-position:20px 25px | 表示左边离父元素20px,上面离父元素25px |
background-position:0 0 / left top | 即位于元素的左上角 |
background-position属性取值单位
水平方向 | left center right |
垂直方向 | top center bottom |
百分比定位
图像的左上角对齐元素的左上角 | 0% 0% |
图像的中点对齐元素的中点 | 50% 50% |
图像20% 30%的点和元素20% 30%的点对齐 | 20% 30% |
图像的右下角对齐元素的右下角 | 100% 100% |
如果只有一个百分数,将作为水平值; 垂直默认值为50% |
无序列表 :标签
项目符号 :标签
或 li{ list-style-type:none; } | none 无标记 disc 实心圆 circle 空心圆 square 实心方块 decimal 数字 |
background-image: url(图片路径); | 使用指定图片作为项目符号 |
ul { padding-left: 2rem; //设置列表左边间隔以放置图片 list-style-type: none; //取消默认的项目符号图标 } ul li { list-style-type:none //先取消项目符号 padding-left: 2rem; //设置列表左边间隔以放置图片 background-image: url(图片路径); //为每一个li插入图片 background-position: 0 0; //定位为最左和最上 background-size: 1.6rem; //为图片与li设置0.4rem的间隔 background-repeat: no-repeat; //取消默认的图片复制,就显示一个图标 } |
用border边框做三角形
.a{ width: 50px; height: 50px; border: black solid; border-width: 30px; border-color: red green yellow blue; /*上右下左*/ border-top-width: 0px; border-left-color: rgba(0,0,0,0); border-right-color: transparent; } | #用边框做三角形 将长、宽改成0px, 将边框颜色改为透明或白色, 显示其中一个颜色即可 |
设置背景图像固定background-attachment
scroll | 图像随页面元素一起滚动 |
fixed | 图像固定在屏幕上,不随屏幕一起滚动 |
设置多重背景图像
(以逗号隔开各项参数)
background-image:url(图片),url(图片),url(图片);
background-position: left bottem,right top,center center;