web前端-基础篇

2020-01-03 16:00:56来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

web前端-基础篇

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

一、背景图片设置:

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

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

        e.g.   background-size:36px 36px;                  width:18px;height:18px;   不设置的话,出现的情况就是只有该内容区域有内容时,才会出现背景图片;

  背景图片的平铺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为准

 

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

 

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

 

 


原文链接:https://www.cnblogs.com/FriedPotatoes/p/12144501.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:flex space-between最后一行对齐问题的解决方案

下一篇:前端遇到瓶颈了怎么办?