<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 1000px;
height: 6000px;
background-color: pink;
margin: 0 auto;
/*
使用border-image设置背景图片
默认从左上角显示,图片太小平铺
*/
background-image: url("2.png");
/*
background-repeat指定图片重复样式
可选值:
repeat 默认值,双向和重复
no-repeat 不重复
repeat-x 水平重复
repeat-z 垂直重复
*/
background-repeat: no-repeat;
/*
背景图片默认在左上角显示
通过background-position可以调整背景图片在元素中位置
可选值:
top bottom left right center中的两个
top left
bottom right
水平方向一个值,垂直方向一个值
如果只给出一个值,第二个值默认center
也可以指定两个偏移量 水平 垂直
*/
/* background-position: bottom right; */
background-position: 1000px 50px;
/*
background-attachment用来设置背景图片是否随页面一起滚动
可选值:
scroll 默认值,背景图片随窗口滚动
fixed 背景图片固定在某一位置
不随窗口滚动的图片,一般设置给body
*/
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
css15.背景设置
最新推荐文章于 2023-05-08 00:45:05 发布