<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
background-image: linear-gradient(to right, red , blue)/*第一个参数填写渐变方向 默认是从上到下 to right从左到右 0deg从下到上 90deg从左向右 180deg从上到下*/
background-image: url();/*可以填url地址 也可以填写颜色渐变 linear-gradient radial-gradient 也可以填写多个url,容错机制*/
background-origin: padding-box;/*三个值 默认是padding-box从padding区域开始展现背景 border-box从border区域开始展示背景 content-box从内容区域开始展示背景*/
background-clip: border-box;/*四个值 默认是border-box padding-box 从padding区域以外不展示背景 content-box 从内容区域外不展示背景 text 搭配text-fill-color:transparent(该属性只在-weblit-的浏览器下有用)使用 只展示背景文字区域的背景图片*/
background-repeat: round space;/*可以填两个值，但是repeat-x和repeat-y只能填一个值,另一个默认是no-repeat no-repeat不平埔 repeat-x在x轴方向上平铺 repeat-y在y轴方向上平铺 round平铺,先拉伸在补充新的图片 space平铺,用空白部分填充在引入新图片,不会改变图片大小*/
background-attachment: scroll;/*默认值是scroll 相对于文字窗口容器定位,文字跟随滚动条动，背景图片就不动 loacl 相对于背景图覆盖的文字定位 滚动条向下时 背景图随着覆盖的文字也一起移动 fixed 相对于整个文档视口即html定位 除了整个页面移动背景图片不会移动*/
/*background-size例子
div width 300px height 400px
图片 width 100px height 200px
等比例缩放一条边的话 图片宽度变为300px 高度为600px 包含住了div 使用cover
等比例缩放一条边的话 图片高度为400px 宽度度为200px 被div包住 使用contain
*/
background-size: 100px 100px;/*设置像素值 背景图片宽度和高度改变 cover contain*/
background-position: 100px 100px;/*相对于左上定点 x轴向右偏移100px y轴向下偏移100px */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
网友评论