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背景

    未经授权,禁止转载!
  • 相关阅读:
    [转] 常用的sql server规范
    <深入理解JavaScript>学习笔记(2)_揭秘命名函数表达式
    SQL Server 字段类型 decimal(18,6)小数点前是几位?记一次数据库SP的BUG处理
    <深入理解JavaScript>学习笔记(1)_编写高质量JavaScript代码的基本要点
    [转] SQL函数说明大全
    jquery 获取 tagName(JQuery如何得到tagName?)
    [转] .NET出现频率非常高的笔试题
    [转] SQL Server游标的使用
    jquery datatables 学习笔记
    [转] 如何让代码可测试化(C#)
  • 原文地址:https://www.cnblogs.com/multistars/p/6512676.html
Copyright © 2011-2022 走看看