web前端-基础篇

该篇仅是本人学习前端时,做的备忘笔记:

一、背景图片设置:

  设置背景图时的css代码:background-image:url(图片的url路径);

  ps:设置好这个背景后请一定要设置该背景图片的大小和该背景图片的显示区域,css样式设置如下:

        e.g.   background-image:url(图片的url路径);
                 width:18px;height:18px;
  不设置的话,出现的情况就是只有该内容区域有内容时,才会出现背景图片;ps:因为要让一个区域的背景图片显示的话,那前提肯定是得先让背景图片所在的块级区域有宽度和高度(高度必须要有,宽度没有则默认宽度为整个浏览器的宽度)才行啊,

  背景图片的平铺css样式:background-repeat:repeat/no-repeat/repeat-x/repeat-y;

  背景图片的定位:background-position:  

     取值 1.x y 以px为单位的数字定义x轴和y轴的位置

               2.x% y%  

            3.x 或者 x%,不写y,默认y为50%

              4.关键字 x:left/center/right  y:top/center/bottom

  背景图片的固定

     background-attachment:

    取值:1.scroll 默认值,背景图定位以容器为准

                  背景图会随着页面滚动条滚动而变化

              2. fixed 固定,背景图定位以body为准

                  页面的滚动条,滚动,背景图不会随着发生位置变化

                  但是,只能在本容器区域内显示

 

posted on 2020-08-16 20:21  treesky  阅读(203)  评论(0编辑  收藏  举报