背景颜色
background-colr背景颜色,值色值
background-color: red;
background-color: #ff0000;
background-color: rgb(255,0,0);
/*rgba的a代表透明度,取值0-1之间可以为小数 */
background-color: rgba(255,0,0,0.6);
背景图插入
background-image:url(图片路径)
背景图与img标签的区别
- 背景图根据元素设置的宽高决定图片的展示内容,img图没有任何被裁减;
- 元素的空间足够大时,背景图会出现重复显示,img没有变化;
- 背景图不设置宽高无法显示,img自身被宽高限制;
- 背景图可以加入其它元素(内容与文字),img不行;
- 背景图常用于打的页面banner,或精灵图,img用于图片展示;
background-image: url(./img/nav-bg.png);
/*背景色*/
background-image:linear-gradient(#D41011,#940000);
/* 改变渐变的角度 */
background-image: linear-gradient(30deg,red,green);
背景图重复
background-repeat背景图是否重复。
/* 不重复 */
background-repeat: no-repeat;
/* 默认的x轴y轴都重复 */
background-repeat: repeat;
/* x轴重复 */
background-repeat: repeat-x;
/* y轴重复 */
background-repeat: repeat-y;
背景图定位
background-position背景图定位,值1为x轴方向位置,值2为y轴方向位置,用空格分开。 取值:百分比/像素。
精灵图
- 精灵图需要元素宽高;
- 整个图插入,使用定位找到精灵图位置;
背景图尺寸
background-size背景图尺寸,可以把背景图放大缩小。
background-size:高度,auto;
如果按照原始图的缩放比例,可以控制一个轴的尺寸,另一个写auto(需注意)
关键词取值
background-size:cover;图片占满整个元素不变形,会损失一部分图片;
background-size:contain;保证完整图片显示,不会损失,但可能会重复;
盒子阴影
box-shadow设置元素阴影,阴影不占位;
box-shadow: 0(x轴方向位置) 0(y轴方向位移) 10px(羽化/虚化,不为负数) 20px(阴影的扩大与缩小) red(阴影颜色) outset(内外阴影,默认外阴影);
轮廓线
/* 去掉轮廓线 */
input {
outline: none;
}
布局相关属性
PC端布局
pc端布局一般使用一个确定的宽度(绝对单位px),作为内容的主要显示区域,这个宽度的元素叫“版心”,版心在整个页面中水平居中。
移动端布局:界面布局简单,适配比较复杂。
浮动兼容性,可以做块级元素横置属性。
浮动属性
原则:如果一个元素浮动,它的兄弟都要浮动。
解决父元素失高
第一种:给父元素加高度;
第二种:给父级元素加overflow:hidden;(溢出隐藏)
第三种:用伪元素清除浮动,给浮动元素的父级元素加类名.clearfix。