• 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

    在这里插入图片描述

  • 相关阅读:
    智慧茶园：茶厂茶园监管可视化视频管理系统解决方案
    SEGGER 的硬件异常 分析
    python 常用库大全，方法大全（持续更新UP）
    springcloudalibaba入门详细使用教程
    javascript事件处理二 事件对象event详解及target和currentTarget区别
    实验一：查看CPU和内存，用机器指令和汇编指令编程
    uboot基础
    SpringBoot - @PathVariable/@RequestParam/@RequestBody注解使用详解
    文心一言 VS 讯飞星火 VS chatgpt （177）-- 算法导论13.3 6题
    看三年的CRUD程序员如何解决数据库死锁的
  • 原文地址：https://blog.csdn.net/Regina_Cai/article/details/127127465