百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程文章 > 正文

零基础教你学前端——72 CSS背景(前端背景颜色怎么设置)

qiyuwang 2025-03-14 20:08 5 浏览 0 评论

我们学习 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

['taetmnt] : 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/video/BV1oU4y1278g/?p=75

相关推荐

# 安装打开 ubuntu-22.04.3-LTS 报错 解决方案

#安装打开ubuntu-22.04.3-LTS报错解决方案WslRegisterDistributionfailedwitherror:0x800701bcError:0x80070...

利用阿里云镜像在ubuntu上安装Docker

简介:...

如何将Ubuntu Kylin(优麒麟)19.10系统升级到20.04版本

UbuntuKylin系统使用一段时间后,有新的版本发布,如何将现有的UbuntuKylin系统升级到最新版本?可以通过下面的方法进行升级。1.先查看相关的UbuntuKylin系统版本情况。使...

Ubuntu 16.10内部代号确认为Yakkety Yak

在正式宣布Ubuntu16.04LTS(XenialXerus)的当天,Canonical创始人MarkShuttleworth还非常开心的在个人微博上宣布Ubuntu下个版本16.10的内...

如何在win11的wsl上装ubuntu(怎么在windows上安装ubuntu)

在Windows11的WSL(WindowsSubsystemforLinux)上安装Ubuntu非常简单。以下是详细的步骤:---...

Win11学院:如何在Windows 11上使用WSL安装Ubuntu

IT之家2月18日消息,科技媒体pureinfotech昨日(2月17日)发布博文,介绍了3中简便的方法,让你轻松在Windows11系统中,使用WindowsSubs...

如何查看Linux的IP地址(如何查看Linux的ip地址)

本头条号每天坚持更新原创干货技术文章,欢迎关注本头条号"Linux学习教程",公众号名称“Linux入门学习教程"。...

怎么看电脑系统?(怎么看电脑系统配置)

要查看电脑的操作系统信息,可以按照以下步骤操作,根据不同的操作系统选择对应的方法:一、Windows系统通过系统属性查看右键点击桌面上的“此电脑”(或“我的电脑”)图标,选择“属性”。在打开的...

如何查询 Linux 内核版本?这些命令一定要会!

Linux内核是操作系统的核心,负责管理硬件资源、调度进程、处理系统调用等关键任务。不同的内核版本可能支持不同的硬件特性、提供新的功能,或者修复了已知的安全漏洞。以下是查询内核版本的几个常见场景:...

深度剖析:Linux下查看系统版本与CPU架构

在Linux系统管理、维护以及软件部署的过程中,精准掌握系统版本和CPU架构是极为关键的基础操作。这些信息不仅有助于我们深入了解系统特性、判断软件兼容性,还能为后续的软件安装、性能优化提供重要依据。接...

504 错误代码解析与应对策略(504错误咋解决)

在互联网的使用过程中,用户偶尔会遭遇各种错误提示,其中504错误代码是较为常见的一种。504错误并非意味着网站被屏蔽,它实际上是指服务器在规定时间内未能从上游服务器获取响应,专业术语称为“Ga...

猎聘APP和官网崩了?回应:正对部分职位整改,临时域名可登录

10月12日,有网友反映猎聘网无法打开,猎聘APP无法登录。截至10月14日,仍有网友不断向猎聘官方微博下反映该情况,而猎聘官方微博未发布相关情况说明,只是在微博内对反映该情况的用户进行回复,“抱歉,...

域名解析的原理是什么?域名解析的流程是怎样的?

域名解析是网站正常运行的关键因素,因此网站管理者了解域名解析的原理和流程对于做好域名管理、解决常见解析问题,保障网站的正常运转十分必要。那么域名解析的原理是什么?域名解析的流程是怎样的?接下来,中科三...

Linux无法解析域名的解决办法(linux 不能解析域名)

如果由于误操作,删除了系统原有的dhcp相关设置就无法正常解析域名。  此时,需要手动修改配置文件:  /etc/resolv.conf  将域名解析服务器手动添加到配置文件中  该文件是DNS域名解...

域名劫持是什么?(域名劫持是什么)

域名劫持是互联网攻击的一种方式,通过攻击域名解析服务器(DNS),或伪造域名解析服务器(DNS)的方法,把目标网站域名解析到错误的地址从而实现用户无法访问目标网站的目的。说的直白些,域名劫持,就是把互...

取消回复欢迎 发表评论: