zoukankan      html  css  js  c++  java
  • CSS之background属性

     css背景是个很有意思的东西,可设置

    背景色:background-color

    背景图:backgoround-image

    背景图显示相对位置:background-position,正数图片往右下移,负数图片向左上移

    背景图片示例:(每张图片高度50px,空白处50px)

    示例:

    1、背景色:

      css文件代码

    .c1{
         100%;
        height: 50px;
        background-color: #425a66;
    }
    

      html代码,跟下面的所有情况一样,后面就不再写了

    <body>
            <div class="c1"></div>
    </body>
    

      效果图

    2、背景图(不重复)

      css代码

    .c1{
         100%;
        height: 500px;
        background-color: #425a66;
        background-image: url(quantu.png);
        background-repeat: no-repeat;
    

      效果图

    3、背景图(重复)

    css代码

    .c1{
         100%;
        height: 500px;
        background-color: #425a66;
        background-image: url(quantu.png);
    }
    

      效果图

    4、显示背景图相对位置

    css代码(0:图片在x轴不动,-300图片在y轴向上移动300px,正好显示第4张图片)

    由于我们的

    height: 50px; 与图片的高度相同
    所以正好显示了一张小图片。
    .c1{
         100%;
        height: 50px;
        background-color: #425a66;
        background-image: url(quantu.png);
        background-repeat: no-repeat;
        background-position: 0 -300px;
    }
    

     效果图

  • 相关阅读:
    什么是序列化
    命令执行漏洞
    sql注入总结
    npm包之merge-descriptors
    Koa路由中间件之koa-router
    TypeScript声明文件(.d.ts)的使用
    TypeScript使用的简单记录
    TypeScript的安装、使用及配置
    Node websocket简单封装
    使用docker-compose配置mysql服务
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6121388.html
Copyright © 2011-2022 走看看