CSS基本样式-背景属性

代码是敲出来的，建议一个一个过一遍

背景属性

  1. 背景颜色
  •   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>

posted on 2019-12-21 22:41  飓风肆虐的青春  阅读(186)  评论(0)  编辑  收藏  举报

导航