CSS导读 （CSS的背景 上）

ops/2024/11/20 4:30:26/

（大家好，今天我们将继续来学习CSS的相关知识，大家可以在评论区进行互动答疑哦~加油！💕）

目录

四、CSS的背景

4.1  背景颜色

4.2  背景图片

4.3  背景平铺

4.4  背景图片位置 

4.4.1  参数是方位名词

小案例1制作

4.4.2  参数是精确单位

4.4.3  参数是混合单位

四、CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 

4.1  背景颜色

background-color属性定义了元素的背景颜色。

语法：

background-color: 颜色值； 

 一般情况下元素背景颜色默认值是transparent(透明)，我们也可以手动指定背景颜色为透明色。

 代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS之背景颜色</title><style>div {width: 200px;height: 200px;background-color: skyblue;}</style>
</head><body><div></div>
</body></html>

4.2  背景图片

background-image属性描述了元素的背景图像。实际开发中常见于logo或者一些修饰的小图片或者是超大的背景图片，优点是非常便于控制位置(精灵图也是一种运用场景) 

语法：

background-image:none  | url（url）→web地址，俗称"网址" 

参数值作用
none无背景图（默认的）
url使用绝对或相对地址指定背景图像

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS之背景图片</title><style>div {width: 200px;height: 200px;/* 不要落下 */background-image: url(images/logo.webp);}</style>
</head><body><div></div>
</body></html>

4.3  背景平铺

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

语法：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

  • 默认情况下，背景图像是平铺的。
参数值作用
repeat背景图像在纵向上和横向上平铺（默认的）
no repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向上平铺
  • 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

 1.不平铺 no repeat

2.默认情况=repeat 

3.沿x轴平铺 repeat-x

 4.沿y轴平铺 repeat-y

代码： 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS之背景平铺</title><style>div {width: 300px;height: 200px;/* 不要落下 */background-image: url(images/logo.webp);/* 1.背景图片不平铺 *//* background-repeat: no-repeat; *//* 2.默认情况下，背景图片是平铺的 *//* background-repeat: repeat; *//* 3.沿x轴平铺 *//* background-repeat: repeat-x; *//* 4.沿y轴平铺 */background-repeat: repeat-y;}</style>
</head><body><div></div>
</body></html>

4.4  背景图片位置 

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

语法：

background-position: x y;

 参数代表的意思是：x坐标和y坐标。可以使用方位名词 或者 精确单位参数值说明。

参数值说明
length百分数 | 由浮点数字和单位标识符组成的长度值
positiontop l center l bottom | left | center l right方位名词

4.4.1  参数是方位名词

  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和 top lef效果一致。
  •  如果只指定一个方位名词，另一个省略，则第二个值默认居中对齐。

 情况一：

情况二：（right/center/left） 

 情况三：（top/center/bottom）

代码： 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS之背景方位 方位名词</title><style>div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.webp);background-repeat: no-repeat;/* background-position: center top; *//* 此时水平方向一定是靠右对齐 第二个参数省略 y轴垂直居中显示 *//* background-position: right ; *//* 此时第一个参数一定是top y轴 第二个参数省略 x轴水平居中显示 */background-position: top;}</style>
</head><body><div></div>
</body></html>
小案例1制作

步骤：

  1. 框架搭建

  2. 文字写入

  3. 图片插入

  4. CSS优化

（补充：网页中图片扒取）

步骤：

  1. 鼠标右键  点击 检查
  2. 点击检查框左上角
  3. 点击想扒取的图片，检查框跳转至相应代码行
  4. 找到对应代码行右方即可找到图片链接，双击打开链接（若无法打开，复制图片链接，在新窗口打开即可）
  5. 另存为  保存到你放到的地方

 代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景方位名词小案例1</title><style>h3 {width: 118px;height: 40px;font-size: 14px;font-weight: 400;line-height: 40px;background-image: url(images/icon.png);background-repeat: no-repeat;background-position: left center;text-indent: 1.5em;}</style>
</head><body><h3>成长守护平台</h3>
</body></html>

4.4.2  参数是精确单位

  • 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。 
  • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

代码： 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS之背景位置 精确位置</title><style>div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.webp);background-repeat: no-repeat;background-position: 50px 20px;}</style>
</head><body><div></div>
</body></html>

4.4.3  参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标，有顺序规定。

小案例2制作

步骤：

  1. 框架搭建

  2. 图片插入

  3. CSS优化

 效果图：

代码： 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景方位名词小案例2 超大图片</title><style>body {background-image: url(images/bg.jpg);background-repeat: no-repeat;/* background-position: center top; */background-position: center 40px;}</style>
</head><body></body></html>

（今日分享暂时到此为止啦！为不断努力的自己鼓鼓掌吧。今日文案分享：人生无论怎样选择都会有遗憾，接下来世界变得美好还是糟糕全在你的手中，无论时代如何残酷要活得像一个真正的人—宫崎骏） 


http://www.ppmy.cn/ops/4388.html

相关文章

小程序插件引入宿主的函数

小程序插件引入宿主的函数

微信小程序的插件和宿主应用是独立的&#xff0c;插件无法直接通过 require 引用宿主应用中的文件。错误信息 Plugin module "" is not defined 表明你尝试在插件中使用了 require 来加载一个不存在的模块。 当需要在插件中使用宿主的某些方法时&#xff0c;必须通过…
阅读更多...
【java】27：java绘图

【java】27：java绘图

坐标体系 - 介绍&#xff1a; 下图说明了Java坐标系。坐标原点位于左上角&#xff0c;以像素为单位。在Java坐标系中&#xff0c;第一个是x坐标&#xff0c;表示当前位置为水平方向&#xff0c;距离坐标原点个像素&#xff1b;第二个是y坐标&#xff0c;表示当前位置为垂直方向…
阅读更多...
Ubuntu20.4版本安装ROS教程

Ubuntu20.4版本安装ROS教程

一、配置源 安装成功的Ubuntu系统自带的工具下载速度慢&#xff0c;不太好用&#xff0c;所以我们可以使用国内稳定高速且免费的镜像网站。 清华源&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple/ 阿里云&#xff1a;https://mirrors.aliyun.com/pypi/simple 中科大&…
阅读更多...
Linux的firewalld防火墙

Linux的firewalld防火墙

介绍firewalld&#xff1a; ①、firewalld&#xff08;Dynamic Firewall Manager of Linux systems&#xff0c;Linux系统的动态防火墙管理器&#xff09;服务是默认的防火墙配置管理工具&#xff0c;它拥有基于CLI&#xff08;命令行界面&#xff09;和基于GUI&#xff08;图…
阅读更多...
【数据结构1-基本概念和术语】

【数据结构1-基本概念和术语】

这里写自定义目录标题 0.数据&#xff0c;数据元素&#xff0c;数据项&#xff0c;数据对项&#xff0c;数据结构&#xff0c;逻辑结构&#xff0c;存储结构1.结构1.1逻辑结构1.2存储结构1.2.1 顺序结构1.2.2链式结构 1.3数据结构1.3.1基本数据类型1.3.2抽象数据类型1.3.2.1一个…
阅读更多...
BUUCTF——[GXYCTF2019]BabyUpload

BUUCTF——[GXYCTF2019]BabyUpload

BUUCTF——[GXYCTF2019]BabyUpload 1.上传嘛&#xff0c;直接丢正常的jpg文件进服务器 2.发现可以正常上传&#xff0c;并且回显出来啦文件上传的路径 /var/www/html/upload/7df22610744ec51e9cb7a8a8eb674374/1111.jpg 3.尝试上传一句话木马 <?php eval($POST[123456]…
阅读更多...
ADOP带您了解电口模块和光模块的区别和运用场景

ADOP带您了解电口模块和光模块的区别和运用场景

电口模块&#xff0c;也称为光转电模块或光电模块&#xff0c;是一种支持热插拔的SFP封装模块&#xff0c;通常具有RJ45连接器类型。它们主要用于短距离数据传输&#xff08;30m-100m&#xff09;&#xff0c;因其低功耗和高性能而受到青睐。电口模块可以分为不同的速率类别&am…
阅读更多...
c++的基础语法

c++的基础语法

看到几篇讲c基础语法非常好的文章&#xff0c;忍不住想存下来&#xff0c;以备以后查找。 文章目录 1. 指针(*)、取地址(&)、解引用(*)与引用(&)1.1C 指针运算符&#xff08;& 和 *&#xff09; 1. 指针()、取地址(&)、解引用()与引用(&) 指针(*)、取地址…
阅读更多...
最新文章

Copyright @ 2022~2023