css背景的基础知识

广东信息科技职业培训学院

广信IT学院

技术文献总结装订册

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

年级：21级1班     姓名：李凯顺        性别： 男     籍贯：湖南

毕业中学： 冷水中心校        入学时间：  2020年8月1日              

身份证号码：431126200505070271微信号：lks2423973507

本技术文献起止时间 2021年 10月 27日～ 2021年 10 月 28日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                                

                文献目录

顺序	文献编号	文献类型	题目	开发工具	关键技术
01		专题技术文献	css背景的基础知识	DW	DW
02

备注：“文献编号”由学院工作人员填写；文献类型填写“专题技术”或“项目研发”

广东信息科技职业培训学院编制

评  分

文献总分：        折算后标准分：       阅卷教师签名

（有效）专题技术文献评分

序 号	题目	各项评分				文献 得分
		主题 深浅 （20）	描述 清晰 （40）	图文 搭配 （20）	分享 评定（20）
01	css背景的基础知识
02
专题技术文献平均分：   文献数量加分：      篇x10分/篇=     分 专题技术文献总分：

项目研发文献评分

序 号	题目	各项评分				文献 得分
		业务模块数量 （20）	模块复杂度 （30）	图文 描述 （30）	分享 评定（20）
01
02
项目研发文献平均分：   文献数量加分：      篇x10分/篇=     分 项目研发文献总分：

备注：

1、分享评定：发表到指定的3个网站，成功1个加5分，成功2个加10分，成功3个加20分。

2、实际总分=专题技术文献平均分+项目研发文献平均分*3。

3、所有文献必须提交对应的程序源码和项目演示视频，按照表格题目命名，放在同一个文件夹。

4、文献和源码、视频等文件，统一放到一个文件夹里面并提交给班长，文件夹命名格式如：

“广信IT17-1张悦190119文献与源文件”。

文献种类：专题技术总结文献

开发工具与关键技术：   DW                            

作者：李凯顺      ；年级：21级1班    ；撰写时间：2021   年 10  月  28 日

文献编号：                归档时间：   年   月   日

css背景的基础知识~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：DW

作者：李凯顺

撰写时间：2021/10/18

1.CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color 背景颜色

background-image 背景图像

background-repeat 设置背景图像在页面的水平或者垂直方向平铺与否。

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background-position   背景图像定位

2.background-color属性值可以用十六进制、英文、rgb（）

body { background-color:yellow; } 

h1 { background-color:#00ff00; } 

p { background-color:rgb(255,0,255); }

上面三种写法都是可以的

3.background-image

body { 

background-image:url('paper.gif');

background-color:#cccccc;

}

url()指向背景图像的文件路径

元素的大小包括内边距，不包含边框；

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

4.关键字

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。

5.背景色

可以使用 background-color 属性为元素设置背景色。

这个属性接受任何合法的颜色值。

6.背景图像

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

7.背景定位

可以利用 background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置：

body{

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-position:center;

  }

8.背景重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

9.关键字

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。

10.百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body{

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-position:50% 50%;

  }

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

11.长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

12.背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

防止这种滚动可以通过 background-attachment 属性。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body {

background-image:url(/i/eg_bg_02.gif);

background-repeat:no-repeat;

background-attachment:fixed

}

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动而滚动。

这是我所学到的HTML基础知识，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！