<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- background-image设置背景图片
可以同时设置背景图片和背景颜色,背景颜色会成为图片的背景
如果图片小于元素,则会自动平铺
大于元素则会有一部分北京无法显示
background-repeat 设置背景的重复方式
repeat默认值,沿x轴y轴方向重复
repeat-x
repeat-y
no-repeat
background-position 设置背景图片的位置
使用top,left,right,bottom,center几个表示方位的词改变位置
使用方位词必须同时制定两个值
通过偏移量制定背景图片的位置
background-clip:
可选值: border-box 默认值,北京会出现在边框的下边
padding-box背景只会出现在内容区和内边距
content-box北京只会出现在内容区
background-origin:背景图片偏移量的原点
padding-box默认值,background-position从内边距处开始计算
content-box背景图片的偏移量从内容区计算
background-size设置背景图片的大小
cover图片比列不变,铺满
contain图片比列不变,在元素中完整显示
background-attachment设置背景图片是否随元素移动
可选值:scorll默认值,背景图片跟随元素移动
fixed背景图片位置固定
-->
<!-- 雪碧图
-->
</body>
</html>
css基础16
最新推荐文章于 2024-09-30 20:20:23 发布