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

    未经授权,禁止转载!
  • 相关阅读:
    死磕 java线程系列之自己动手写一个线程池(续)
    Spring Boot (十): Spring Boot Admin 监控 Spring Boot 应用
    opencv之为图像添加边界
    协作,才能更好的中断线程
    Java并发——线程池Executor框架
    神经网络dropout
    xgboost
    物体检测-毕业设计项目回顾
    计算机网络-TCP连接
    gbdt推导和代码
  • 原文地址:https://www.cnblogs.com/multistars/p/6512676.html
Copyright © 2011-2022 走看看