CSS导读 （CSS的背景 上）

（大家好，今天我们将继续来学习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.hqwc.cn/news/624067.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[蓝桥杯 2019 国 B] 解谜游戏

[蓝桥杯 2019 国 B] 解谜游戏

[蓝桥杯 2019 国 B] 解谜游戏 题目背景 题目描述 小明正在玩一款解谜游戏。谜题由 24 24 24 根塑料棒组成&#xff0c;其中黄色塑料棒 4 4 4 根&#xff0c;红色 8 8 8 根&#xff0c;绿色 12 12 12 根 (后面用 Y 表示黄色、R 表示红色、G 表示绿色)。初始时这些塑料棒排…
阅读更多...
代码随想录刷题随记23-回溯3

代码随想录刷题随记23-回溯3

代码随想录刷题随记23-回溯3 39. 组合总和 leetcode链接 注意同一个 数字可以 无限制重复被选取 怎么体现这个可以重复取的思想很重要 解题代码&#xff1a; class Solution { public:void backtrace( vector<vector<int>>& ret,vector<int> &pat…
阅读更多...
鸿蒙端云一体化开发--调用云函数--适合小白体制

鸿蒙端云一体化开发--调用云函数--适合小白体制

如何实现在端侧调用云函数&#xff1f; 观看前&#xff0c;友情提示&#xff1a; 不知道《如何一键创建端云一体化模板》的小白同学&#xff0c;请看&#xff1a; 鸿蒙端云一体化开发--开发云函数--适合小白体制-CSDN博客 实现方法&#xff1a; 第一步&#xff1a;添加依赖 …
阅读更多...
android studio 网络请求okhttp3、okgo

android studio 网络请求okhttp3、okgo

一、在build.gradle文件里添加 implementation com.squareup.okhttp3:okhttp:4.9.0 implementation com.squareup.okhttp3:okhttp:3.12.0 implementation com.squareup.okio:okio:1.17.4 implementation com.lzy.net:okgo:3.0.4 implementation com.alibaba:fastjson:1.2.57 i…
阅读更多...
Linux之 USB驱动框架-usb-skeleton.c usb驱动源码分析(3)

Linux之 USB驱动框架-usb-skeleton.c usb驱动源码分析(3)

一、usb 驱动框架图 二、 usb 设备经典驱动&#xff1a;usb-skeleton.c 驱动 路径&#xff1a; drivers/usb/usb-skeleton.c USB骨架程序可以看做一个最简单的USB设备驱动的实例&#xff0c;其分析流程大致如下&#xff1a; static struct usb_driver skel_driver { …
阅读更多...
hot100 -- 链表（中）

hot100 -- 链表（中）

不要觉得力扣核心代码模式麻烦&#xff0c;它确实比不上ACM模式舒服&#xff0c;可以自己处理输入输出 只是你对 链表 和 return 的理解不到位 &#x1f442; ▶ 屿前世 (163.com) &#x1f442; ▶ see you tomorrow (163.com) 目录 &#x1f382;两数相加 &#x1f6a9;删…
阅读更多...
使用阿里云试用Elasticsearch学习：5. 地理位置

使用阿里云试用Elasticsearch学习：5. 地理位置

我们拿着纸质地图漫步城市的日子一去不返了。得益于智能手机&#xff0c;我们现在总是可以知道 自己所处的准确位置&#xff0c;也预料到网站会使用这些信息。我想知道从当前位置步行 5 分钟内可到的那些餐馆&#xff0c;对伦敦更大范围内的其他餐馆并不感兴趣。 但地理位置功…
阅读更多...
【CAN】采样点介绍及测试方法

【CAN】采样点介绍及测试方法

文章目录 1 什么是采样点2 为什么需要采样点3 采样点的计算公式4 VH6501测试原理和方法4.1 VH6501测试采样点原理4.2 VH6501测试方法 >>返回总目录<< 1 什么是采样点 采样点是节点判断信号逻辑电平的位置&#xff0c;是CAN控制器读取总线电平&#xff0c;并解释各…
阅读更多...
Big Data and Cognitive Computing (IF=3.7) 计算机/大数据/人工智能期刊投稿

Big Data and Cognitive Computing (IF=3.7) 计算机/大数据/人工智能期刊投稿

Special Issue: Artificial Cognitive Systems for Computer Vision 欢迎计算机/大数据/人工智能/计算机视觉相关工作的投稿&#xff01; 影响因子3.7&#xff0c;截止时间2024年12月31日 投稿咨询&#xff1a;lqyan18fudan.edu.cn 投稿网址&#xff1a;https://www.mdpi.com/j…
阅读更多...
【多模态检索】Coarse-to-Fine Visual Representation

【多模态检索】Coarse-to-Fine Visual Representation

快手文本视频多模态检索论文 论文&#xff1a;Towards Efficient and Effective Text-to-Video Retrieval with Coarse-to-Fine Visual Representation Learning 链接&#xff1a;https://arxiv.org/abs/2401.00701 摘要 近些年&#xff0c;基于CLIP的text-to-video检索方法…
阅读更多...
二维旋转变换

二维旋转变换

求点 P(x1, y1) 绕点 Q(x2, y2) 逆时针旋转 θ 得到的点的坐标 先看绕原点旋转的情况&#xff1a; 如图所示点 v 绕 原点旋转 θ 角&#xff0c;得到点v’&#xff0c;假设 v点的坐标是(x, y) &#xff0c;那么可以推导得到 v’点的坐标&#xff08;x’, y’)&#xff1a; { x …
阅读更多...
JVM主要知识点详解

JVM主要知识点详解

目录 1. 性能监控和调优 1.1 调优相关参数 1.2 内存泄漏排查 1.3 cpu飙⾼ 2. 内存与垃圾回收 2.1JVM的组成&#xff08;面试题&#xff09; 2.2 Java虚拟机栈的组成 2.3 本地方法栈 2.4 堆 2.5 方法区&#xff08;抽象概念&#xff09; 2.5.1 方法区和永久代以及元空…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023