乐趣区

关于前端:零基础教你学前端72-CSS背景

咱们学习 CSS 背景属性。
假如这里有个 div 容器,宽 400,高 300,默认状况下,这个 div 是没有背景的,或者说它的背景是通明的,咱们拿一张图片试验一下就能看得出来,这个 div 在默认状况下,背景是通明的。
也能够给 div 加一个背景色彩。

既然能够设置背景色彩,那么当然也能够给这个 div 设计一个背景图片,就像这样。然而因为这个 div 曾经被我设定了大小,图片呢,是大于这个容器的,所以实际上,咱们最终看到的成果,是这个样子的。咱们只能看到图片的一部分。上面咱们就来看看利用 CSS 背景属性如何实现这个成果。
创立一个 css-background.html 文件和一个 background-style.css 文件。接下来,咱们打算给整个页面来增加背景图片。
事实上,body 元素也是一个容器,能够间接给 body 增加背景图片。body 容器默认程度方向上,是占满整个窗口的,咱们来给它增加一个高度款式,定义选择器 body,申明款式 height: 100%。

CSS
body {height: 100%;}

预览一下成果,按下 F12,来察看一下页面 body 元素的大小,咱们发现 body 仍然是只有宽度,没有高度。为什么咱们设置的高度 100% 不论用呢?大家留神,这里的 100% 是绝对于它的父元素高度的,body 元素的父元素是 html,这个元素咱们并没有给它设置大小。
所以,在 body 选择器后面加一个 html 逗号 (html,),这样两个元素都设置了高度。让他们的高度和浏览器窗口大小保持一致。
这时再来看一下页面,当初 body 和整个窗口就一样大了。

CSS
html, body {height: 100%;}

上面咱们给 body 增加背景图片,能够通过 background-image 属性实现,属性值为 url 后跟一个小括号,括号外面填写背景图片的门路(url(./duck.gif))。
回到款式代码,再定义一个 body 选择器,独自给它再申明款式 background-image: url(./duck.gif)。这个图片是一个动静图片。
咱们来观看一下成果,为什么会呈现这么多的图片呢?我明明只是加了一张背景图而已。起因是,当咱们给元素增加背景图片的时候,图片是以平铺的形式来展示的。

什么是平铺呢?就是当咱们放入一张背景图的时候,这个图片在默认状况下,会向周围扩散,有限的进行反复,就变成了这个样子。当然了,容器是有大小限度的,最终咱们能看到的局部呢,也就这么多而已。

如果咱们不心愿这个背景图是反复的,须要应用一个新的背景属性 background-repeat,取值为 no-repeat。
咱们来看成果,最终就只有一张动图了。
接下来咱们来批改一下,将背景图片换成另外一张图片。
再来察看这个成果,因为不容许平铺,咱们只看到了一张图片。

把 background-repeat 属性值 no-repeat 改为 repeat。
咱们就看到了这样的成果。

在平时开发的时候,给一个网页或一个比拟大的容器设置背景,常常会采纳这样的技巧,放一个小的图片进去,只须要让它放弃平铺的形式,我就会失去一张无限大的图。

再回到方才的例子。如果要求这个背景图片在页面两头显示,咱们如何调整背景图的地位呢?
咱们须要应用 background-position 属性,这个属性须要写两个值:第一个值示意在程度方向上的对齐形式——left,center,right。第二个值示意在垂直方向上的对齐形式——top,center,bottom。
给 body 增加款式 background-position: center center,也就是程度垂直居中。
大家发现,图片移到了页面的两头。如果将图片放到右下角,属性值该如何设置呢?把答案写到公屏上吧。

回到 html 代码,增加一个 h1 元素和五个 p 元素,填入一些文本。再复制五份。
再回到 css 代码,背景图复原为 bg.png,图片平铺形式为 repeat。
咱们看一下成果,能够通过滚动条来查看网页内容,仔细观察,文字和背景图片一起滚动。那是否实现文字滚动,背景图片不动呢?大家能够先脑补一下成果。

实现这个成果,须要应用 background-attachment 属性,用来申明容器里的背景图片与内容的附丽形式。值 fixed:图片固定,值 scroll:同时滚动。
给 body 选择器增加款式 background-attachment
[əˈtætʃmənt] : fixed。
再看一下成果,滚动一下页面,背景固定的成果实现了!

后面咱们屡次应用到了 background-color 属性,它能够给容器设置背景色彩,值能够设置为色彩名称,十六进制色彩值,RGB 色彩值等等。
把背景图片的款式正文掉,增加 background-color 属性,值为 green。
此时,整个页面背景为绿色!色彩有点深,能够让绿色变的浅一些吗?
你能想到的办法应该是换一个其余的色彩值,其实,咱们能够通过让背景通明一些,同样能够实现这个成果。
这须要学习一个新的色彩值示意办法——rgba。这里的 rgb 就是 rgb 色彩值,a 是 alpha 的简写,示意通过设置一个 alpha 通道,来指定色彩的不透明度,是一个介于 0 到 1 的数字。0 示意齐全通明,1 示意齐全不通明。比方 rgba(0, 0, 0, 0.5),示意的色彩就是彩色半透明。
把 green 色彩名称改为 rgba(0, 255, 0, 0.1)。
咱们看,页面绿色的背景因为通明,色彩变浅了!

为了缩短代码,也能够应用繁多的 background 来指定所有的背景属性。
能够把 body 的全副背景属性,合并在一个 background 属性里。正文所有代码,申明属性 background,值能够写为:色彩值 rgba(0, 255, 0, 0.1),背景图片 url(./duck.gif),平铺形式 no-repeat,背景图地位 right bottom,背景附丽 fixed。(rgba(0, 255, 0, 0.1) url(./bg.png) no-repeat right bottom fixed;)
咱们看,一句申明,实现了全副的背景成果!

文章配套视频链接:https://www.bilibili.com/vide…

退出移动版