• CSS篇十——（1）

    目录

    一、CSS的背景

    通过CSS背景属性，可以给页面元素添加背景样式。
    背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

    1. 背景颜色

    background-color属性定义了元素的背景颜色。

    1.1 使用方式
    background-color: 颜色值|transparent(透明);

    • 1

    一般情况下元素背景颜色默认值是transparent（透明），也可以手动指定背景颜色为透明色。

    代码示例：

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景之背景颜色title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* background-color: transparent;   透明的，清澈的 */
            background-color: steelblue;
        }
    style>
head>

<body>
    <div>

    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

    2. 背景图片

    background-image属性描述了元素的背景图像。实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

    2.1 使用方式
    background-image: none|url (url)

    • 1
    参数值作用
    none无背景图（默认的）
    url(url)使用绝对或相对地址指定背景图像

    代码示例：

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景之背景图片title>
    <style>
        div {
            width: 500px;
            height: 600px;
            /* 不要落下 url（url） */
            background-image: url(images/baidu_logo.png);
        }
    style>
head>

<body>
    <div>div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    3. 背景平铺

    background-repeat属性使背景图片在HTML页面上进行平铺。

    3.1 使用方式
    background-repeat: repeat | no-repeat | repeat-x | repeat-y

    • 1
    参数值作用
    repeat背景图像在纵向和横向上平铺（默认）
    no-repeat背景图像不平铺
    repeat-x背景图像在横向上平铺
    repeat-y背景图像在纵向平铺

    代码示例：

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景之背景图片、背景平铺title>
    <style>
        div {
            width: 900px;
            height: 6800px;
            /* 不要落下 url（url） */
            background-image: url(images/baidu_logo.png);
            /* 背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 默认情况下图片是平铺的 */
            /* background-repeat: repeat; */
            /* 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 沿着y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
            background-color: steelblue;
        }
    style>
head>

<body>
    <div>div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    在这里插入图片描述

  • 相关阅读:
    EsgynDB Troubleshooting - 网卡MTU导致跨网段访问数据库失败
    WPF随笔收录-实时绘制心率曲线
    Unreal基础概念
    promise的基本用法
    深入学习JVM底层（三）：垃圾回收器与内存分配策略
    rar格式转换zip格式，如何做？
    java计算机毕业设计基于安卓Android微信的团务智慧管理小程序uniAPP
    开放集识别（基于生成模型）
    .9图片的问题总结(Android studio制作):
    进程信号的保存和处理
  • 原文地址：https://blog.csdn.net/Regina_Cai/article/details/127127465