web前端-基础篇
程序员文章站
2022-06-22 11:02:55
该篇仅是本人学习前端时,做的备忘笔记: 一、背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小和该背景图片的显示区域,css样式设置如下: e.g. background-size:36px 3 ......
该篇仅是本人学习前端时,做的备忘笔记:
一、背景图片设置:
设置背景图时的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为准
页面的滚动条,滚动,背景图不会随着发生位置变化
但是,只能在本容器区域内显示
上一篇: 多任务实现-协程
推荐阅读
-
Web前端框架bootstrap实战【第一次接触使用】
-
前端编码规范(4)-- CSS 和 Sass (SCSS) 规范_html/css_WEB-ITnose
-
C语言基础篇-数据类型(一)gcc编译和预处理
-
【CSS基础】优先级、引入方式、Hack_html/css_WEB-ITnose
-
web前端开发小工具集合_PHP教程
-
JavaScript极简入门教程(一):基础篇_javascript技巧
-
HTML5与CSS3基础教程:普通页面构成和创建页眉_html/css_WEB-ITnose
-
Python2.5/2.6实用教程 入门基础篇
-
HTML入门基础_html/css_WEB-ITnose
-
实战电商后端系统(三)—— 以vue-element-admin为基础的前端项目对接后端接口