• 繁星CSS3之旅-CSS基本样式-CSS背景


    CSS背景

    1、背景

    CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果

    (1)设置背景颜色

    例:

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p>测试背景是否可以继承</p>
    </html>
    body{
        background-color: darkgray;
    }
    p{
        width:150px;/*增宽*/
        padding: 10px;/*内边距10px*/
        background-color: red;
    }

    效果图

    (2)、设置背景图片

    body{
        background-image: url("bg.jpg");/*图片名称*/
    }

    效果图

    body{
        background-image: url("bg.jpg");/*图片名称*/
        background-repeat: repeat-x;/*重复X轴&重复y轴:repeat-y*/
    }

    body{
        background-image: url("bg.jpg");/*图片名称*/
        background-repeat: no-repeat;/*重复X轴&重复y轴:repeat-y*/
        background-position: center top;/*从中间顶部开始显示*/
    }

    background-attachment效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
        <p>测试背景是否可以继承</p>
    </html>
    body{
        background-image: url("bg.jpg");/*图片名称*/
        background-repeat: no-repeat;/*重复X轴&重复y轴:repeat-y*/
        background-position: left top;/*从中间顶部开始显示*/
        background-attachment: fixed;
    }

    2、CSS3背景

    未经授权,禁止转载!
  • 相关阅读:
    NX二次开发-UFUN获取当前主要版本的版本号
    NX二次开发-UFUN创建图纸注释uc5540
    VC++ADO/COM,put_LeftMargin设置纸张上下左右边距的大小
    VC++ADO/COM,put_Orientation组件设置纸张方向0默认1纵向2横向
    常用的数据拼接方法(不断更新中)
    去重对象数组
    将对象数组中指定键值赋给另一个数组并对更改对象数组中的key
    CSS3动态计算公式——calc()的坑
    @PostConstruct注解
    java操作Redis缓存设置过期时间
  • 原文地址:https://www.cnblogs.com/multistars/p/6512676.html
Copyright © 2020-2023  润新知