ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

第七节课2--背景

2019-12-31 14:57:52  阅读:171  来源: 互联网

标签:居中 repeat url 背景 第七节 background position 背景图片


背景图片与图片的区别:背景图片属于css 不占位置,图片元素占位置

background:是个复合属性

1.background-color(背景颜色)

2.background-img:url("  ")

   background-repeat:repeat(默认值) no-repeat(不平埔)

3 background-position:x y         给一个值代表x方向上的margin, y方向默认居中

                                               给两个值分别代表x y 方向上margin

                                               支持负值

                                               center:上下左右都居中

                                               只设置left`right,垂直方向居中    只设置top bottom,水平方向居中 left最左 right最右 top最上 bottom最下

                                               不要用百分比值

4 background-size:w  h  ,只给一个值,代表宽度,高度等比列缩放

                                        给两个值,分别代表宽高

                                        给百分比,是相对于父容器的宽度与高度,如果只给一个值,代表宽度相对于父容器,高度等比例缩放

                                       可用百分比值给两个值一般会失真

                                        cover(等比列):背景图片填充整个父容器,不留缝隙   contain(等比列):背景图片包含在父容器内,可能留缝隙

复合写法:background: url(" ") no-repeat position/size color

                 注意如果position没变化要写 0 0不能不写

                 background:url("") no-repeat 0 0 /size

精灵图:把一堆小图标放在一张图上。 优点:减少请求次数,加快加载速度。

              利用background里的img的position与外部小盒子大小,使适当的小图标充斥小盒子即为引用精灵图标。

        审查元素 右键url open in new tab 选项,如果出现图片网页即为引入成功。

 

 

                                       

标签:居中,repeat,url,背景,第七节,background,position,背景图片
来源: https://www.cnblogs.com/yzdwd/p/12124373.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有