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

    未经授权,禁止转载!
  • 相关阅读:
    [Hadoop 周边] Hadoop和大数据:60款顶级大数据开源工具(2015-10-27)【转】
    [Nginx] 关键概念解读
    [随想感悟] 研究技术的方法
    [Hadoop 周边] 浅谈大数据(hadoop)和移动开发(Android、IOS)开发前景【转】
    [优化] 数据库优化基础
    [随想感悟] 面试时,问哪些问题能试出一个 Android 应用开发者真正的水平?【转自知乎】
    258. Add Digits
    257. Binary Tree Paths
    256. Paint House
    255. Verify Preorder Sequence in Binary Search Tree
  • 原文地址:https://www.cnblogs.com/multistars/p/6512676.html
Copyright © 2011-2022 走看看