<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>css的背景属性和显示模式</title>
</head>
<body>
<!-- 背景色：background-color
背景图：background-image
作用：网页中，使用背景图实现装饰性的图片效果
缩写：bgi
属性值：url(背景图URL)
注意：背景图默认是平铺（复制）的效果
背景图平铺方式：background-repeat
缩写：bgr
属性值：
no-repeat：不平铺，盒子左上角显示一张背景图
repeat：平铺（默认效果）
repeat-x：水平方向平铺
repeat-y：垂直方向平铺
背景图位置：background-position
属性值：水平方向位置，垂直方向位置关键字
提示：关键字取值写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中
1.关键字
letf：左侧
right：右侧
center：居中
top：顶部
button：底部
2.坐标（数字+px，正负都可以）
正数向右移动，负数向左移动
例
background-position:center bottom;
background-position:50px 100px;
background-position:50px center;
背景图缩放：background-size
作用：设置背景图大小
常用属性值：
1.关键字
2.百分比：根据盒子尺寸计算图片大小
如果写了100% 图片的宽度跟盒子宽度一样，图片的高度按照图片等比例缩放
3.数字+单位
cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见，
contain：等比例缩放背景图片以完全装入背景图，如果图片的宽高和盒子尺寸相等，可能背景图区部分空白
背景图固定：background-attachment
作用：背景不会随着元素的内容滚动
属性值：fixed
background-attachment：fixed;
背景复合属性：background
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
显示模式：标签（元素）的显示方式
作用：布局网页时候，根据标签的显示模式选择合适的标签摆放内容
块级元素特点：
独占一行，宽度默认是父级的100%，添加宽高属性生效
行内元素特点：
一行共存多个，尺寸由内容决定，加宽高都不生效
行内块：一行共存多个，默认尺寸由内容决定，加宽高生效
转换显示模式
属性名：display
属性值：
block：块级
inline-block：行块级
inline：行内
-->
</body>
</html>
1211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
