zoukankan      html  css  js  c++  java
  • css常用样式背景background如何使用

    css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color代表背景颜色   .background-image代表背景图像   .background-repeat 代表背景图像水平或者垂直平铺  .background-attachment代表背景图像是否固定或者随着页面的其余部分滚动   .background-position代表设置背景图像的起始位置 在这些背景效果中background-color属性定义了元素的背景颜色,颜色值通常以以下方式定义:十六进制 - 如:"#ff0000" RGB - 如:"rgb(255,0,0)"颜色名称 - 如:"red" 具体用下面的代码展示说明下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS背景background</title>
        <style type="text/css">
        /*background-color:定义元素背景色*/
        div{
            /*颜色值通常以以下方式定义:十六进制 - 如:"#ff0000" RGB - 如:"rgb(255,0,0)"颜色名称 - 如:"red"*/
            color: #f90;
            color: rgb(red, green, blue);
            color: royalblue;
            color: rgb(255,255,255);
            background-color: blueviolet;
        }
        /*background-image:定义元素背景图像*/
        body{
            background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
        }
        /*background-repeat:代表背景图像水平或者垂直平铺*/
        body{
            background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
            background-repeat: repeat-x;/*图像水平平铺*/
            background-repeat: repeat-Y;/*图像垂直平铺*/
            background-repeat: no-repeat;/*图像拒绝平铺*/
        }
        /*background-position代表设置背景图像的起始位置*/
        /* 提示:为 background-position 属性提供值有很多方法。首先,
    可以使用一些关键字:top、bottom、left、right 和 center;其次,可以使用长度值,如 100px 或 5cm;最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。 */
        body{
            background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
            background-position:left top;
        }
    
        /* background-attachment代表背景图像是否固定或者随着页面的其余部分滚动 */
        body{
            background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
            background-repeat: no-repeat;
            background-position:800px 1000px;/*图像将在元素内边距向右移动800px,向下移动1000px*/
            background-attachment: fixed;
        }
        /* background背景简写 */
        /* div{
            background: color image repeat attachment position;
        } */
        </style>
    </head>
    <body>
        <div>如何在页面滚动齿轮的时候实现背景图不动,选择 background-attachmn:fixed</div>
        <!-- 100个换行符 br*100敲下enter键 -->
    </body>
    </html>
  • 相关阅读:
    .NET定时任务执行管理器开源组件–FluentScheduler
    ASP.NET MVC 使用 FluentScheduler 定时器计划任务
    Windows 2008 IIS7.5中创建独立账号的FTP站点图文教程
    除非Microsoft FTP 服务(FTPSVC)正在运行,否则无法启动FTP站点。服务目前已停止
    Web API--自定义异常结果的处理
    C#怎么遍历一个对象里面的全部属性?
    WebApi 接口参数不再困惑:传参详解
    C#进阶系列——WebApi 接口测试工具:WebApiTestClient
    WebApi安全性 使用TOKEN+签名验证
    ASP.NET(C#) Web Api通过文件流下载文件到本地实例
  • 原文地址:https://www.cnblogs.com/webaction/p/12308584.html
Copyright © 2011-2022 走看看