Web前端笔记-3、CSS基础-背景属性、显示模式
背景属性
背景色：background-color
背景图：background-image
背景图平铺方式：background-repeat
背景图位置：background-position
背景图缩放：background-size
背景图固定：background-attachment
背景复合属性： background
网页中，使用背景图实现装饰性的图片效果。
bgr
| 属性值 | 说明 |
|---|---|
| no-repeat | 不平铺 |
| repeat | 平铺（默认效果） |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
bgp
属性名：background-position（bgp）
属性值：水平方向位置 垂直方向位置
使用关键字或者坐标指示位置
| 关键字 | 位置 |
|---|---|
| left | 左侧 |
| right | 右侧 |
| center | 居中 |
| top | 顶部 |
| bottom | 底部 |
坐标：数字+px，正负都可以。
水平：正数向右；负数向左
垂直：正数向下；负数向上
关键字取值方式写法，可以颠倒取值顺序。
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中。
bgz
作用：设置背景图大小
属性名：background-size（bgz）
常用属性值：
• 关键字
cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
• 百分比：根据盒子尺寸计算图片大小
• 数字＋单位（例如：px）
工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。
bga
默认是scroll，滚动。
fixed 固定的。
bg
属性名：background （bg）
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
background: pink url(./images/1.png) no-repeat right center/cover;
要想用缩放，必须和位置连在一起。非要连起来，使用
0 0/cover
显示模式
显示模式：标签（元素）的显示方式。
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。
- 块级元素
- 行内元素
- 行内块元素
块级元素
独占一行
宽度默认是父级的100%
添加宽高属性生效
行内元素
一行可以显示多个
设置宽高属性不生效
宽高尺寸由内容撑开
行内块元素
一行可以显示多个
设置宽高属性生效
宽高尺寸也可以由内容撑开
图片image 表单 input 单元格td等是行内块元素 (table是块级元素)
转换显示模式
属性名：display
属性值：
| 属性值 | 效果 |
|---|---|
| block | 块级 |
| inline-block | 行内块 |
| inline | 行内 |
典型应用：a 链接是行内元素，但为了方便点击，需要设置宽高，将行内转为块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接转为块级</title>
<style>
a {
/* 行内转换为块级 */
display: block;
width: 100px;
height: 40px;
color: #fff;
background-color: #666;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<!-- 这两个都独占一行了 -->
<a href="#">点击一下</a>
<a href="#">再点击一下</a>
</body>
</html>
案例-banner
块级元素可以控制里面的行内元素或者行内块元素 左中右对齐 text-align
块级元素不能控制里面的块级元素对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>banner-案例二</title>
<style>
.banner {
height: 500px;
background: #f3f3f4 url(./images/bk.png) left bottom no-repeat;
text-align: right;
color: #333;
}
.banner h2 {
height: 100px;
font-size: 36px;
font-weight: 400;
}
.banner p {
font-size: 20px;
}
.banner a {
/* 这个链接一定要转换为行内块，才能像图片一样被父级的text-align: right影响 */
display: inline-block;
width: 125px;
height: 40px;
background-color: #f64077;
text-decoration: none;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<div class="banner">
<h1>让创造产生价值</h1>
<p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
<a href="#">我要报名</a>
</div>
</body>
</html>
浙公网安备 33010602011771号