<!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.背景設置
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.