标签:str no-repeat des 目录 center 背景图 class div 直接
代码是敲出来的,建议一个一个过一遍
  background-color  背景颜色
  默认值是transparent(透明的)<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基本样式</title>
    <style>
        body{
            height: 1000px;
            /*背景颜色   默认为透明  transparent*/
            /*颜色的取值:
            1.关键字:red、blue等
            2.16进制:#000000、#cccccc、#ff0000等
            3.rgb(0,0,0)
            4.rgba(0,0,0,.5)
            */
            background-color: red;
            background-color: #ff0000;
            background-color: rgb(255,0,0);
            background-color: rgba(255,0,0,.5);
        }
    </style>
</head>
<body>
<h1>背景属性</h1>
</body>
</html>  background-image  背景图片
      默认值是none(没有图片)
  元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距
  通过url使用绝对或相对地址指定图片
  background-image: url("images/img.jpg");
  1.绝对路径:文件在网络或本地的绝对地址,从盘符开始  C:\Users\Administrator\Desktop\a.jpg
  2.相对路径:相对于你当前目录,同一等级直接写图片名称即可,在下一级,用\查找,在上一级,用../查找。一般不使用绝对地址。示例代码
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        body{
            height: 1000px;
            /*背景颜色   默认为透明  transparent*/
            background-color: red;
            /*background-color: #ff0000;*/
            /*background-color: rgb(255,0,0);*/
            /*background-color: rgba(255,0,0,.5);*/
            
            /*背景图片 默认水平垂直平铺*/
            /*background-image: url("images/pic2.jpeg");*/
            /*背景图片平铺*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*背景图片的大小*/
            /*background-size:1000px ;*/
            /*background-size: 100% 100%;*/
            /*背景图片固定*/
            /*background-attachment:fixed ;*/
            background:red  url("images/pic2.jpeg") no-repeat fixed ;
            background-size: 100% 100%;
        }
        .box{
            width: 800px;
            height: 600px;
            /*background-color: rgba(255,255,255,.5);
            background-image: url("images/pic1.jpg");
            background-repeat: no-repeat;*/
            /*background-size: contain;*/
            background: rgba(255,255,255,.5) url("images/pic1.jpg") no-repeat;
            /*背景图片定位*/
            /*background-position: x y;*/
            /*当只有水平方向,垂直方向默认居中*/
            /*background-position: 30px 30px;*/
            /*background-position: 30px;*/
            /*background-position: right bottom;*/
            /*background-position: center;*/
            /*简写为*/
            /*background:颜色 图片 平铺 大小  定位 固定;*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>标签:str no-repeat des 目录 center 背景图 class div 直接
原文地址:https://www.cnblogs.com/Testking/p/12078547.html