CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）
2024-05-06 12:10:57
1. 背景颜色(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>Document</title><style>div {background-color: red;}</style>
</head>
<body><div>背景颜色</div>
</body>
</html>
2. 背景图片(image)
background-image : none | url (url) | 参数 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 【url不要加引号 】 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 500px;height: 400px;background-color: pink;/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/background-image: url(monkey.png);}</style>
</head>
<body><div>背景图片</div>
</body>
</html>
3. 背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y | 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 500px;height: 400px;background-color: pink;/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/background-image: url(monkey.png);/*默认的是平铺图 repeat*//* background-repeat: repeat; *//*背景图片不平铺*//* background-repeat: no-repeat; *//*横向平铺 repeat-x*//* background-repeat: repeat-x; *//*纵向平铺*/background-repeat: repeat-y;}</style>
</head>
<body><div>背景图片</div>
</body>
</html>
4. 背景位置(position)
background-position : length || lengthbackground-position : position || position | 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
注意：
必须先指定background-image属性
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 500px;height: 400px;background-color: pink;/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/background-image: url(monkey.png);/*背景图片不平铺*/background-repeat: no-repeat;/*背景位置*//*background-position: x坐标 y坐标;*//*background-position: right top; 右上角*//*background-position: left bottom; 左下角*//*background-position: center center; 水平居中 垂直居中*//*则两个值前后顺序无关 因为是方位名词*//*background-position: center left; *//*如果只指定了一个方位名词，另一个值默认居中对齐*//* background-position: top; *//*background-position: x坐标 y坐标;*//*background-position: right top; 右上角*//*那么第一个，肯定是 x 是 50 第二的一定是y 是 10*//*background-position: 50px 10px ;*//*以下说明 x 10像素 y 垂直居中的*//*background-position: 10px center;*/background-position: center 10px;}</style>
</head>
<body><div>背景图片</div>
</body>
</html>
小图片左侧对齐盒子案例：
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.icon {width: 150px;height: 35px;background-color: pink;font-size: 14px;font-weight: 500;line-height: 35px;background-image: url(logo.png);background-repeat: no-repeat;background-position: 10px center;text-indent: 2.5em;}</style>
</head>
<body><div class="icon">摄像机</div>
</body>
</html>
5. 背景附着
背景附着就是解释背景是滚动的还是固定的
background-attachment : scroll | fixed | 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 3000px;background-color: pink;background-image: url(king.jpg);background-repeat: no-repeat;/*超大背景图片的做法 背景定位*/background-position: center top;/*背景固定的*/background-attachment: fixed;}</style>
</head>
<body><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p>
</body>
</html>
6. 背景简写
background：属性的值的书写顺序官方并没有强制标准的。
可以按照这个顺序写：
- background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: transparent url(image.jpg) repeat-y scroll center top ;示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 3000px;/* background-color: pink;background-image: url(king.jpg);background-repeat: no-repeat; *//*超大背景图片的做法 背景定位*//* background-position: center top; *//*背景固定的*//* background-attachment: fixed; *//*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/background: pink url(king.jpg) no-repeat fixed center top;}</style>
</head>
<body><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p>
</body>
</html>
7. 背景透明(CSS3)
background: rgba(0, 0, 0, 0.3);最后一个参数是alpha 透明度 取值范围 0~1之间
我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 700px;height: 120px;background-color: pink;}.demo1 {width: 700px;height: 30px;line-height: 30px;}.demo2 {width: 700px;height: 30px;background: rgba(0, 0, 0, 0.3);}</style>
</head>
<body><div><div class="demo1">青春正能量，我要天天向上！</div><div class="demo1">青春正能量，我要天天向上！</div><div class="demo1">青春正能量，我要天天向上！</div><div class="demo2">青春正能量，我要天天向上！</div></div>
</body>
</html>
8. 链接导航栏综合案例
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav {/*让里面的6个链接 居中对齐水平 这句话对 行内元素 行内块元素都有效果的*/text-align: center;}.nav a {/*有大小的 因为a 是行内元素 不能直接设置宽度和高 必须要转换 行内块元素*/display: inline-block;width: 120px;height: 50px;/*行高等于盒子的高度 就可以让单行文本垂直居中*/line-height: 50px;color: #fff;text-decoration: none;/*背景简写*/background: url(bg.png) no-repeat;}/*鼠标经过nav里面的链接， 背景图片更换一下就好了*/.nav a:hover {background-image: url(bgc.png);}</style>
</head>
<body><div class="nav"><a href="#">推荐</a><a href="#">新闻</a><a href="#">体育</a><a href="#">养生</a><a href="#">健康</a><a href="#">娱乐</a></div>
</body>
</html>
CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）相关推荐
- CSS的背景（背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定（图片附着），背景复合写法）
CSS的背景 通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...
- 04-背景相关属性【背景颜色，背景图片，背景平铺，背景位置，img与背景图片的区别】
目录 1.背景颜色 2.背景图片 3.背景平铺 4.背景位置 5.background复合属性连写 6.背景图和img的区别 1.背景颜色 属性名:backgrou-color 例如: back ...
- W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
W3school:CSS基础:CSS注释.颜色(颜色.RGB.HEX.HSL).背景(背景.背景图像.背景重复.背景附着.简写背景属性) 一.CSS注释 1.注释用于解释代码,以后在您编辑源代码时可能 ...
- php图片背景平铺,css如何设置背景图片的平铺方式？css设置背景图片平铺的方法（图文详解）...
css如何设置背景图片的平铺方式?本文就给大家介绍css是如何设置背景图片平铺的方法,让大家了解在css中设置背景图片水平方法平铺.垂直方向平铺,或者是不平铺的方法.有一定的参考价值,有需要的朋友可以 ...
- html怎么让导航栏背景透明,Swift - 导航栏背景全透明效果的实现（沉浸式效果）...
由于导航栏背景透明,那么整个视图的背景便会占据全部的可视区域,从而让用户有一种沉浸式的体验.下面通过样例演示如何实现这个效果. 1,实现原理 (1)如果想让导航栏(navigationBar)透明,只 ...
- Matlab/Simulink 中示波器背景和线条颜色更改与图片保存方法
最近在做实验室,对示波器的操作不熟练,导致看波形一直都很不细致. 在此介绍更改示波器背景线条颜色 与 输出保存示波器图片的简单方法. 1.更改示波器背景线条颜色 一般在论文中使用的波形图背景一般是白色 ...
- php图片背景平铺,css如何让背景图片平铺？css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- html如何取消背景平铺,css怎么设置图片背景不平铺？
css可以设置图片背景background-repeat:no-repeat样式实现图片背景不平铺,background-repeat属性定义了图像的平铺模式. css可以使用background-r ...
- 背景平铺php,CSS_CSS控制背景图像平铺实现边框阴影效果，一款用CSS控制背景图像平铺， - phpStudy...
CSS控制背景图像平铺实现边框阴影效果 一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的 ...
最新文章
- javascript 执行环境细节分析、原理-12
- 如何使用 UserAccountControl 标志操纵用户帐户属性
- springboot 集成jwt设置过期时间_传说中的jwt，我们来征服一下
- 数据结构之直接插入排序
- C++：const分配内存情况分析
- img标签默认有外边距吗_你知道css的盒模型吗？
- html js布尔值怎么定义,JavaScript基本类型值-Undefined、Null、Boolean
- 数据库---事务（一）
- ScrollView嵌套ListView只显示一行
- 软件发布！DOTA2统计学
- 知识就是力量！（内含赠书福利）
- python3中浮点数float的四舍五入，round跟decimal区别
- 阿里云云计算 18 块存储与对象存储
- tensorflow安装中踩到的坑protobuf、h5py、tensorboard、werkzeug
- 初学CODEBLOCK+wxWidgets
- 解决github无法clone
- css3中vw/vh/vmin/vmax的含义与使用方法
- WEditor USB device is offline
- SQlException 对象名无效
- 企业IT管理岗的首选认证：ITIL®4 Foundation