• 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:UsersAdministratorDesktopa.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{
                 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>
    
  • 相关阅读:
    python 常用的模块(hashlib)转
    python 常用的模块(struct)转
    python 常用的模块(base64)转
    python 常用的模块(collections)转
    django xadmin的使用和改造
    django静态html中做动态变化
    django 用model来简化form
    InstallShield2015制作安装包----------安装后实现电脑开机自启动
    InstallShield2015创建安装包
    InstallShield :cannot rename directory ...
  • 原文地址:https://www.cnblogs.com/Testking/p/12078547.html
Copyright © 2020-2023  润新知