body背景图片自适应设置(前端背景图片自适应的代码推荐)

来源:国外服务器 在您之前已被浏览:1 次
导读:目前正在解读《body背景图片自适应设置(前端背景图片自适应的代码推荐)》的相关信息,《body背景图片自适应设置(前端背景图片自适应的代码推荐)》是由用户自行发布的知识型内容!下面请观看由(国外主机 - www.2bp.net)用户发布《body背景图片自适应设置(前端背景图片自适应的代码推荐)》的详细说明。
笨笨网美国主机,w ww.2 b p .n e t

上节课讲了关于表格的一些更多知识和用表格配合div来进行网页排版。

这节课开始讲关于网页图片的相关知识。

上节课的课后练习

1.去网上搜索2个自己喜欢的图片,1个图片用来作为整个网页的背景,另一个图片可以进行重叠组成网页的背景。

学哥找了2个大尺寸的图片和2个小尺寸图片,如下图目录所示:

body背景图片自适应设置(前端背景图片自适应的代码推荐)


在index.html所在的目录下创建一个images目录,将4个图片全部放进去。

2.给技术经验的表格增加一个表头,标题分别是:技术类别,技术点,经验年数。文字加粗显示。

在技术经验的表格的第一行增加一个tr,里面增加3个td,然后复制一个CSS样式td1,改名为tdh,增加设置文字粗体,背景色设置为淡灰色。

css代码修改如下:

body背景图片自适应设置(前端背景图片自适应的代码推荐)


html代码修改如下:

body背景图片自适应设置(前端背景图片自适应的代码推荐)


刷新页面:

body背景图片自适应设置(前端背景图片自适应的代码推荐)


可以看到,表头的文字加粗,并且背景色为半透明浅灰色。

设置tdh的background-color:rgba(200,200,200,0.6);,这是一个新的写法,通过CSS的函数rgba可以设置一个RGBA颜色,这种颜色值带有一个alpha通道,可以设置颜色的透明度,也就是可以透过当前颜色的比率是多少。

RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

rgba(200,200,200,0.6);就是一个灰色的,透明度为0.6的一个半透明浅灰色。

因为整个body的背景色也是灰色的,因此这里就看不出来tdh的背景色是半透明的,可以来调整body的背景为一个图片,就能看出来是半透明的了。

设置背景图片

之前讲了通过设置body的background-color属性来设置整个网页的背景色。

背景色设置有时候局限性比较大,很多网站都采用图片来设置背景图片,可以做到让网页更美观。

设置背景图片的CSS属性是像这样的:

background-image: url(./images/background.jpg);

url是一个CSS函数,里面参数是图片的目录路径。

一般采用相对目录路径,也就是假设index.html存放在哪一个目录下,则在这个目录下创建一个images目录,将background.jpg文件放到images目录里面去。

修改css文件的body的样式,增加background-image,同时删除bigtitle的width属性,因为div默认就是宽度为100%,为了防止该属性对背景图片的干扰,所以删除掉不必要的属性。

css代码修改如下:

body背景图片自适应设置(前端背景图片自适应的代码推荐)


刷新页面:

body背景图片自适应设置(前端背景图片自适应的代码推荐)


可以看到技术经验的表格的背景色是半透明的,但是4个大标题的背景色不是半透明的,将它也改为半透明色。

修改CSS样式bigtitle的background-color属性值为半透明颜色值。

css代码修改如下:

body背景图片自适应设置(前端背景图片自适应的代码推荐)


刷新页面:

body背景图片自适应设置(前端背景图片自适应的代码推荐)


可以看到,大标题的背景色都是半透明的颜色了,这样看起来比较美观了。

但是发现一个问题,由于背景图片的宽度正好是自动适应浏览器的宽度的,因此相应的高度不一定能正好完全填满浏览器的高度,因此背景图片默认是自动向y轴方向进行重复显示的,显示的高度根据当前显示的内容的高度来自动截断。

因此可以看到有一个明显的界限,就是图片开始重复显示了。

笨笨网美国主机,w ww.2 b p .n e t
提醒:《body背景图片自适应设置(前端背景图片自适应的代码推荐)》最后刷新时间 2025-03-21 11:16:43,本站为公益型个人网站,仅供个人学习和记录信息,不进行任何商业性质的盈利。如果内容、图片资源失效或内容涉及侵权,请反馈至,我们会及时处理。本站只保证内容的可读性,无法保证真实性,《body背景图片自适应设置(前端背景图片自适应的代码推荐)》该内容的真实性请自行鉴别。