zoukankan      html  css  js  c++  java
  • 繁星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背景

    未经授权,禁止转载!
  • 相关阅读:
    分区范围oracle partition table related operations
    软件应用交委有权力叫停打车软件吗?
    美国竞争对手华为将反击竞争对手:我们不会对它们友好
    类型名称了解typename的双重意义
    全局变量局部变量ScriptCase中的全局变量、局部变量
    方法定义django admin中 外键下拉框添加过滤(只需要显示我所要的过滤结果)
    移动设备恶意软件移动设备恶意软件应用泛滥 安卓成攻击首选
    nbtstat命令详解
    route命令范例
    硬盘MBR全面分析
  • 原文地址:https://www.cnblogs.com/multistars/p/6512676.html
Copyright © 2011-2022 走看看