• 《HTML+CSS+JavaScript》之第19章 背景样式

    《HTML+CSS+JavaScript》之第19章 背景样式

    19.1 背景样式简介

    背景颜色+背景图片

    19.2 背景颜色

    background-color:颜色值;

    • 1
    • 两种颜色取值
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div
       {
           width:100px;
           height:60px;
       }
       #div1{background-color: hotpink}
       #div2{background-color: #87CEFA;}
    </style>
</head>
<body>
    <div id="div1">背景颜色为：hotpink</div>
    <div id="div2">背景颜色为：#87CEFA</div>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • color与background-color
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       p
       {
           color:white;
           background-color: hotpink;
       }
    </style>
</head>
<body>
    <p>
        p元素文本颜色为white<br/>
        p元素背景颜色为hotpink
    </p>
</body>
</html>

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

    19.3 背景图片

    background-image:url(图片路径);

    • 1
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
		div {
			width:250px;
			height:170px;
    		background-image: url(img/haizei.png);
    		/*背景图片所在元素必须设置width，height，默认width，height为0，不显示图片*/
       	}
    </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.4 背景图片重复

    background-repeat:取值;

    • 1
    • repeat，水平垂直平铺，默认
    • repeat-x，水平平铺
    • repeat-y，垂直平铺
    • no-repeat，不平铺
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:200px;
            height:100px;
            border: 1px solid silver;
            background-image: url(img/flower.png);
        }
        #div2{background-repeat: repeat-x}
        #div3{background-repeat: repeat-y}
        #div4{background-repeat: no-repeat}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></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

    19.5 背景图片位置

    background-position:像素值/关键字/百分比;

    • 1

    19.5.1 像素值

    左上角水平，垂直距离

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:300px;
            height:200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-position:40px 20px;
        }
    </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

    19.5.2 关键字

    垂直位置，水平位置

    • 垂直位置
      top、center、bottom

    • 水平位置
      left、center、right

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:300px;
            height:200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-position:center right;
        }
    </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

    19.6 背景图片固定

    background-attachment:取值;

    • 1
    • scroll，随元素一起滚动，默认
    • fixed，固定
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:160px;
            height:1200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-attachment:fixed;
        }
    </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
  • 相关阅读:
    Redis缓存雪崩、击穿、穿透
    kubernetes重新生成证书，重新生成配置文件
    2023齐鲁工业大学考研介绍
    vue 使用Dialog对话框使用过程中出现灰色遮罩问题
    基于Python的邯郸地标美食导游平台设计与实现-计算机毕业设计源码+LW文档
    华为HG532系列路由器命令注入漏洞分析 CVE-2017-17215
    Idea插件 Sonar
    微服务介绍&微服务环境搭建
    MySQL数据库之主从复制
    深度学习：UserWarning: The parameter ‘pretrained‘ is deprecated since 0.13..解决办法
  • 原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125628168