CSS背景(background)相关的属性
- background-color: red;
- background-image: url("");
- background-repeat: no-repeat; 可选值:repeat no-repeat repeat-x repeat-y
- background-position: left center; 需要两个值,第一个值设置水平方向的对齐方式(left right center),第二个值设置竖直方向的对齐方式(top bottom center)。
<!DOCTYPE html>
<html lang="zn-CH">
<head>
<meta charset="UTF-8">
<title>Rock学前端</title>
<style>
.container {
width: 500px;
height: 250px;
border: 2px solid black;
/* background-color: skyblue; !*默认值是transparent(透明)*!
*!*background-image: url("../../images/yellow-bg.png");*!
background-image: url("../../logo.png");
!*设置背景图片的重复方式*!
background-repeat: no-repeat; !*repeat repeat-x repeat-y*!
!*背景图片的位置*!
!*background-position:center center; !* 分别控制水平方向的竖直和图片对齐方式 center right left ,只写一个词,另一个方向是center (left 就是left center)*!*!
background-position: 100px 100px;*/
/*复合属性*/
background: url("./images/bg-graphics.png") skyblue no-repeat center top;
}
</style>
</head>
<body>
<div class="container">
Rock
</div>
<hr>
<hr>
</body>
</html>