九、CSS背景(background)相关的属性

57 阅读1分钟

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>