常州外贸公司网站建设,网站建设中的功能模块描述,如何做弹幕网站,百度云app个人主页#xff1a;学习前端的小z 个人专栏#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结#xff0c;欢迎大家在评论区交流讨论#xff01; 文章目录 一、CSS 背景1 背景颜色2 背景色半透明3 背景图片4 背景平铺5 背景图片位置6 … 个人主页学习前端的小z 个人专栏HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结欢迎大家在评论区交流讨论 文章目录 一、CSS 背景1 背景颜色2 背景色半透明3 背景图片4 背景平铺5 背景图片位置6 背景图片大小7 背景图片定位-了解8 背景图片剪切-了解9 背景图像固定背景附着-了解10 背景复合写法 二、CSS 精灵图1 为什么需要精灵图2 精灵图sprites的使用3 精灵技术的使用4 制作精灵图 一、CSS 背景
通过 CSS 背景属性可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1 背景颜色
background-color 属性定义了元素的背景颜色。
background-color:颜色值;一般情况下元素背景颜色默认值是 transparent透明我们也可以手动指定背景颜色为透明色。
background-color:transparent;2 背景色半透明
CSS3 为我们提供了背景颜色半透明的效果。
background-color: rgba(0, 0, 0, 0.3);最后一个参数是 alpha 透明度取值范围在 0~1之间我们习惯把 0.3 的 0 省略掉写为 background: rgba(0, 0, 0, .3);注意背景半透明是指盒子背景半透明盒子里面的内容不受影响
3 背景图片
background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
background-image : none | url (url)取值
值说明url(‘URL’)图像的URLnone无图像背景会显示。这是默认
注意背景图片后面的地址千万不要忘记加 URL 在css文件或者style标签里面尽量加引号行内样式里面的路径不要加引号。
4 背景平铺
如果需要在 HTML 页面上对背景图像进行平铺可以使用 background-repeat 属性。
background-repeat: repeat | no-repeat | repeat-x | repeat-y取值
值说明repeat背景图像将向垂直和水平方向重复。这是默认repeat-x只有水平位置会重复背景图像repeat-y只有垂直位置会重复背景图像no-repeatbackground-image 不会重复
5 背景图片位置
利用 background-position 属性可以改变图片在背景中的位置。
background-position: x y;参数代表的意思是x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
值描述left、right、centertop、bottom、center如果仅指定一个关键字其他值将会是centerx% y%第一个值是水平位置第二个值是垂直。左上角是00。右下角是100100。如果仅指定了一个值其他值将是50。 。默认值为00xpos ypos第一个值是水平位置第二个值是垂直。左上角是0。单位一般是像素0px 0px。如果仅指定了一个值其他值将是50。你可以混合使用和positions
参数是方位名词
如果指定的两个值都是方位名词则两个值前后顺序无关比如 left top 和 top left 效果一致如果只指定了一个方位名词另一个值省略则第二个值默认居中对齐
参数是精确单位
如果参数值是精确坐标那么第一个肯定是 x 坐标第二个一定是 y 坐标如果只指定一个数值那该数值一定是 x 坐标另一个默认垂直居中
参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用则第一个值是 x 坐标第二个值是 y 坐标
6 背景图片大小
background-size 设置背景图片大小。
图片可以保有其原有的尺寸或者拉伸到新的尺寸或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
background-size: length|percentage|cover|contain;取值
值描述length设置背景图片高度和宽度。第一个值设置宽度第二个值设置的高度。如果只给出一个值第二个是设置为 auto(自动)percentage将计算相对于背景定位区域的百分比。第一个值设置宽度第二个值设置的高度各个值之间以空格 隔开指定高和宽以逗号 , 隔开指定多重背景。如果只给出一个值第二个是设置为auto(自动)cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
cover 和 contain 都是按图片宽高比展示
cover - 水平或者垂直方向不满足宽高比会被剪裁比如宽高那么宽会被剪裁高就会完全呈现反之亦然
contain - 水平或者垂直方向不满足宽高比会被留白比如宽高那么水平方向就被留白反之亦然都会完全出来呈现
7 背景图片定位-了解
background-origin属性指定background-position属性应该是相对位置。
background-origin: padding-box|border-box|content-box;取值
值描述padding-box背景图像填充框的相对位置默认值border-box背景图像边界框的相对位置content-box背景图像的相对位置的内容框
8 背景图片剪切-了解
background-clip属性指定背景绘制区域。
background-clip: border-box|padding-box|content-box;取值
值说明border-box默认值。背景绘制在边框方框内剪切成边框方框。padding-box背景绘制在衬距方框内剪切成衬距方框。content-box背景绘制在内容方框内剪切成内容方框。
9 背景图像固定背景附着-了解
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment 后期可以制作视差滚动的效果。
主布局滚动想要图片背景固定加上fixed
局部滚动想要图片背景固定加上scroll否则指定local随页面滚动而滚动
background-attachment : scroll | fixed取值
值描述scroll背景图片随着页面的滚动而滚动这是默认的。fixed主布局背景图片不会随着页面的滚动而滚动。local背景图片会随着元素内容的滚动而滚动。
scroll和local的区别scroll相对于元素固定而local是相对于元素内容固定。也就是说在存在内部滚动条的情况下scroll就相当于fixed而local就相当于scroll。
当谈及background-attachment时需要考虑两种不同的观点主视图(浏览器窗口)和局域视图(你可以在上面的演示中看到这点)。
scroll是默认值。它与主视图一起滚动但在局域视图中保持固定。 一般用途 如果文档比较长那么当文档向下滚动时背景图像也会随之滚动。当文档滚动到超过图像的位置时图像就会消失。 您可以通过 background-attachment 属性防止这种滚动。通过这个属性可以声明图像相对于可视区是固定的fixed因此不会受到滚动的影响; background-attachment 属性的默认值是 scroll也就是说在默认的情况下背景会随文档滚动。 其他如果背景图像background-attachment是固定background-origin属性没有任何效果。
10 背景复合写法
为了简化背景属性的代码我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量。
当使用简写属性时没有特定的书写顺序,一般习惯约定顺序为
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;
background: transparent url(image.jpg) repeat-y fixed top ;各值之间用空格分隔不分先后顺序。可以只有其中的某些值例如 background#FF0000 url(smiley.gif); 是允许的。 个人主页学习前端的小z 个人专栏HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结欢迎大家在评论区交流讨论 文章目录 一、CSS 背景1 背景颜色2 背景色半透明3 背景图片4 背景平铺5 背景图片位置6 背景图片大小7 背景图片定位-了解8 背景图片剪切-了解9 背景图像固定背景附着-了解10 背景复合写法 二、CSS 精灵图1 为什么需要精灵图2 精灵图sprites的使用3 精灵技术的使用4 制作精灵图 二、CSS 精灵图
1 为什么需要精灵图
一个网页中往往会应用很多小的背景图像作为修饰当网页中的图像过多时服务器就会频繁地接收和发送请求图片造成服务器请求压力过大这将大大降低页面的加载速度。
因此为了有效地减少服务器接收和发送请求的次数提高页面的加载速度 出现了 CSS 精灵技术也称CSS Sprites、CSS 雪碧。
核心原理将网页中的一些小背景图像整合到一张大图中 这样服务器只需要一次请求就可以了。
精灵技术目的为了有效地减少服务器接收和发送请求的次数提高页面的加载速度
百度精灵图 2 精灵图sprites的使用
精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中这个大图片也称为 sprites 精灵图 或者 雪碧图移动背景图片位置 此时可以使用 background-position移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同因为一般情况下都是往上往左移动所以数值是负值使用精灵图的时候需要精确测量每个小背景图片的大小和位置
3 精灵技术的使用
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中精灵图然而各个网页元素通常只需要精灵图中不同位置的某个小图要想精确定位到精灵图中的某个小图就需要使用 CSS 的 background-image、background-repeat 和 background-position 属性进行背景定位其中最关键的是使用 background-position 属性精确地定位。
.bg-tp1 {width: 20px;height: 20px;background: url(css_sprites.png) -10px -10px;
}.bg-tp2 {width: 20px;height: 20px;background: url(css_sprites.png) -50px -10px;
}.bg-tp3 {width: 20px;height: 20px;background: url(css_sprites.png) -10px -50px;
}.bg-tp4 {width: 20px;height: 20px;background: url(css_sprites.png) -50px -50px;
}4 制作精灵图
精灵图制作网
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中精灵图那我们要做的就是把小图拼合成一张大图。
大部分情况下精灵图都是网页美工做不过前端也要自食其力不要过度依赖美工。
我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。
我们可以横向摆放也可以纵向摆放但是每个图片之间间隔至少隔开偶数像素合适。
在我们精灵图的最低端留一片空隙方便我们以后添加其他精灵图。
