21.3 CSS 背景属性

image-20230901120028773

1. 背景颜色

background-color属性: 设置元素的背景颜色.
它可以接受各种颜色值, 包括命名颜色, 十六进制颜色码, RGB值, HSL值等.

快捷键: bc+tab background-color:#fff;

2023-08-22_00032

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background color</title>
  <style>
    div {
      height: 100px;
    }
    .box1 {
      background: red;
    }

    .box2 {
      background: rgb(100, 100, 100);
    }

    .box3 {
      background: rgba(100, 100, 100, d0.5);
    }
    .box4 {
      background: #AAAAAA;
    }
    .box5 {
      background: #666;
    }
  </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>
</html>

2023-08-22_00032

image-20230822202154103

2. 背景图片

background-image属性: 设置元素的背景图片.
可以使用该属性指定一个图片文件的URL作为元素的背景.

注意事项: 如果图片的大小, 没有标签大, 那么会自动在水平和垂直方向平铺和填充.

快捷键: bi+tab background-image:url("");

背景图片: 仅仅是一个装饰, 不会占用位置, 有定位属性可以控制图片位置.
插入图片: 会占用位置, 没有定位属性, 控制图片位置难, 搜索引擎能收录.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background image</title>
    <style>
        div {
            height: 1000px;
            width: 1000px;
            background-image: url(image/img1.gif);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

image-20230822203145007

3. 背景图像重复方式

background-repeat属性: 用来控制背景图像的重复方式.
它可以设置在CSS中的背景属性(background或background-image)上.

常用属性值:
- repeat: 默认值, 背景图像在水平和垂直方向上重复.
- repeat-x: 背景图像在水平方向上重复.
- repeat-y: 背景图像在垂直方向上重复.
- no-repeat: 背景图像不重复, 只出现一次.
- round: 背景图像在水平和垂直方向上拉伸或缩小, 直到填满整个容器.
- space: 背景图像在水平和垂直方向上复制以填满容器, 但图像之间的间隔保持相等.

快捷键: bgr+tab background-repeat:;

应用场景: 为网页设置背景图片, 图片越大, 需要加载的时间越长, 通过平铺来降低图片的大小, 提示网页的访问速度(使用有规律的图片).

找一张有规律, x, y轴平铺.

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background repeat</title>
    <style>
        div {
            height: 1080px;
            width: 1920px;
        }

        .box1 {
            background-image: url(image/img2.png);
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

image-20230822203903030

4. 背景图片定位

background-position属性: 用于设置背景图像在容器内的位置.

该属性可以采用以下方式进行设置:
* 1. 使用关键字或关键字组合:
     - left: 将背景图像向容器的左侧对齐.
     - center: 将背景图像在容器中水平和垂直居中.
     - right: 将背景图像向容器的右侧对齐.
     - top: 将背景图像向容器的顶部对齐.
     - bottom: 将背景图像向容器的底部对齐.
     - 关键字组合: 可以使用关键字组合(左或右, 上或下), 如'left top', 'right bottom'等, 将背景图像分别在水平和垂直方向上对齐.

* 2. 使用像素, 百分比或其他单位的值:
     - px: 使用像素值来指定背景图像相对于容器边框的偏移位置.
     - %: 使用百分比值来指定背景图像相对于容器宽度或高度的偏移位置.
     - 其他单位: 可以使用其他有效的长度单位如: em, rem, vw, vh等.

注意事项: 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 图片会覆盖背景颜色.

快捷键: bp+tab background-position:0 0;

4.1 关键字定位

kn

ml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 1</title>
    <style>
        div {
            height: 300px;
            width: 300px;
            background: #00ff19;
        }

        .box1 {
            background-image: url(image/柯南.jpg);
            background-repeat: no-repeat;
            background-position: top left; /* 垂直方向 上  水平方向 左 */


        }

        .box2 {
            background-image: url(image/小兰.jpg);
            background-repeat: no-repeat;
            background-position: bottom right; /* 垂直方向 下   水平方向 右 */

        }

    </style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

image-20230822205608893

4.2 像素定位

image-20211020191231310

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 2</title>
    <style>
        div {
            height: 300px;
            width: 300px;
            background: red;
        }

        .box1 {
            background-image: url(image/柯南.jpg);
            background-repeat: no-repeat;
            background-position: 100px 0;

        }

        .box2 {
            background-image: url(image/小兰.jpg);
            background-repeat: no-repeat;
            background-position: -50px -50px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

image-20230822210103328

4.3 练习

4.3.1 图片居中

image-20220216190259843

假设图片大小为 96x96 像素, div大小为300x300像素.
要使图片在div中水平和垂直居中, 可以按照以下方式计算背景图像的background-position属性值.

水平偏移量 = (div 宽度 - 图片宽度) / 2 = (300 - 96) / 2 = 102 像素
垂直偏移量 = (div 高度 - 图片高度) / 2 = (300 - 96) / 2 = 102 像素

* 默认设置图标的左上角坐标.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 3</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            background-image: url(image/柯南2.jpg);
            background-repeat: no-repeat;  /* 不平铺 */
            background-position: 102px;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

image-20230822210543729

4.3.2 优先展示

优先展示: 网页始终将图片中间的重要信息给展示出来.
通常设置: background-position: center top;

csdn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 4</title>
    <style>
        div {
            height: 160px;
        }

        .box {
            background-image: url(image/1024.gif);
            background-position: center top;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

2023-08-22_00040

4.3.3 图片拼接

将下面两张图片拼接在一起.

j2

j1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 5</title>
    <style>
        div {

            width: 1400px;
            height: 900px;
        }

        .box1 {
            background-image: url(image/剑圣1.png);
            background-repeat: no-repeat;
            background-position: 61% top;
        }

        .box2 {
            background-image: url(image/剑圣2.png);
        }

    </style>
</head>
<body>
<div class="box2">
    <div class="box1"></div>
</div>
</body>
</html>

image-20230822215900487

4.3.4 图片重叠

将下面两张图片重叠在一起.

鱼1

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 6</title>
  <style>
    div {

      width: 1136px;
      height: 632px;
    }
    .box1 {
      background-image: url(image/鱼1.png);
        background-repeat: no-repeat;
    }
    .box2 {
      background-image: url(image/鱼2.png);
      background-repeat: no-repeat;
      background-position: center bottom;
    }

  </style>
</head>
<body>
    <div class="box1">
      <div class="box2"></div>
    </div>
</body>
</html>

image-20230822220644155

5. 背景图片关联

background-attachment属性: 指定背景图像的滚动行为(背景图片与滚动条之间的关联方式).

常用属性值:
- scroll: 背景图像会随着页面的滚动而滚动.
- fixed:  背景图像在页面滚动时固定不动, 保持在可视区域的固定位置.
- local:  背景图像会随着元素内容的滚动而滚动, 而不是整个页面的滚动.

快捷键: ba+tab background-attachment:;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background attachment</title>
    <style>
        .box1 {
            background-image: url(image/img2.png);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<div class="box1">
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
</div>
</body>
</html>

GIF 2023-8-22 22-11-57

6. 背景属性缩写

背景属性缩写格式:
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

注意事项: background中可以省略任何一个属性值. 

快捷键(可能失效): gb+ +tab: background: #fff url() 0 0 no-repeat;

yy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background</title>
    <style>
        div {
            width: 300px;
            height: 300px;
        }

        /*完整格式*/
        .box1 {
            background-color: aqua;
            background-image: url(image/太极.png);
            background-repeat: no-repeat;
            background-position: center;
        }

        /*缩写格式*/
        .box2 {
            background: red url(image/太极.png) no-repeat center;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

image-20230822221601857

7. 背景图片大小

background-size属性: 定义背景图片的大小.

常用属性值:
* 1. 具体像素值: 可以指定背景图片的宽度和高度.
     例如'background-size: 200px 300px;', 表示背景图片宽度为200像素, 高度为300像素.

* 2. 百分比值: 可以根据容器元素的大小来调整背景图片的尺寸.
     例如'background-size: 50% auto;', 表示背景图片的宽度为容器宽度的50%, 高度根据图片原始比例自动计算.

* 3. 关键词值:
   - auto: 背景图片的尺寸保持原始比例, 并根据容器大小进行自动调整.
   - cover: 等比例缩放背景图片, 以完全覆盖容器, 可能会有部分图片超出容器范围.
   - contain: 等比例缩放背景图片, 以完全适应容器, 可能会有背景区域出现空白.

   例如,' background-size: cover;': 表示将背景图片等比例缩放以完全覆盖容器, 可能会裁剪部分图片.
   而'background-size: contain;': 表示将背景图片等比例缩放以完全适应容器, 可能会在容器内留有空白区域. 

   请注意, 'background-size'属性只对具有背景图片的元素起作用, 而不会影响其他元素.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background size</title>
    <style>

        body {
            background-image: url(image/太极.png);
            /* 不缩放 */
            background-size: 300px 300px;
            /* 不平铺 */
            background-repeat: no-repeat;

        }

    </style>

</head>
<body>
</body>
</html>

image-20230901111547954

固定背景图片的大小, 不随页面缩放.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background attachment</title>
    <style>
        body {
            /* 缩放页面不影响背景图片 */
            background-image: url(image/壁纸.webp);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>

</body>
</html>

GIF 2023-9-1 11-30-59

8. CSS精灵图

CSS精灵图(CSS Sprite): 是一种将多个图像合并到单个图像文件中的技术.
通过使用CSS中的背景定位和尺寸控制, 可以只显示图像文件中的特定部分, 从而实现在网页中展示多个图像.
使用CSS精灵图的好处包括减少HTTP请求次数, 提高页面加载速度, 以及更好的用户体验.

CSS精灵图需要配合背景图片和背景定位来使用.
使用Adobe Fireworks CS6 工具 中的web切片工具快速找到图片的位置.

jlt2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Sprite</title>
    <style>
        div {
            width: 140px;
            height: 140px;
            display: inline-block; /* 设置为行内块级标签  */
            background-image: url("https://s2.loli.net/2022/02/16/yE1xHUWdnovFZYT.jpg");
        }

        .box1 {
            background-position: -1041px -1443px;
        }

        .box2 {
            background-position: -1445px -1442px
        }

        .box3 {
            background-position: -1832px -1644px;
        }

        .box4 {
            background-position: -237px -245px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

image-20230901113243028

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/100077.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Revit SDK：AutoJoin 自动合并体量

Revit SDK：AutoJoin 自动合并体量

前言 Revit 有一套完整的几何造型能力&#xff0c;每一个体量都是一个GenericForm&#xff0c;这些体量可以通过拉伸、扫掠等创建。这个例子介绍如何将他们合并成一个体量。 内容 合并体量的关键接口&#xff1a; // Autodesk.Revit.DB.Document public GeomCombination Com…
阅读更多...
【ArcGIS Pro二次开发】(65)：进出平衡SHP转TXT、TXT转SHP

【ArcGIS Pro二次开发】(65)：进出平衡SHP转TXT、TXT转SHP

最近一个小伙伴提了这么一个需求&#xff0c;需要把TXT和SHP进行互转。 这种TXT文件其实遇到了好几个版本&#xff0c;都有一点小差异。之前已经做过一个TXT转SHP的工具&#xff0c;但好像不适用。于是针对这个版本&#xff0c;做了互转的2个工具。 【SHP转TXT】 一、要实现的…
阅读更多...
Go几种读取配置文件的方式

Go几种读取配置文件的方式

比较有名的方案有 使用viper管理配置[1] 支持多种配置文件格式&#xff0c;包括 JSON,TOML,YAML,HECL,envfile&#xff0c;甚至还包括Java properties 支持为配置项设置默认值 可以通过命令行参数覆盖指定的配置项 支持参数别名 viper[2]按照这个优先级&#xff08;从高到低&am…
阅读更多...
爬虫逆向实战（二十八）--某税网第一步登录

爬虫逆向实战（二十八）--某税网第一步登录

一、数据接口分析 主页地址&#xff1a;某税网 1、抓包 通过抓包可以发现登录接口是factorAccountLogin 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看载荷模块可以发现有一个datagram 和 一个signature加密参数 请求头是否加密&#xff1f; 通过查看“标…
阅读更多...
11 mysql float/double/decimal 的数据存储

11 mysql float/double/decimal 的数据存储

前言 这里主要是 由于之前的一个 datetime 存储的时间 导致的问题的衍生出来的探究 探究的主要内容为 int 类类型的存储, 浮点类类型的存储, char 类类型的存储, blob 类类型的存储, enum/json/set/bit 类类型的存储 本文主要 的相关内容是 float, decimal 类类型的相关数据…
阅读更多...
电脑提示找不到concrt140.dll怎么修复？concrt140.dll快速修复方法

电脑提示找不到concrt140.dll怎么修复？concrt140.dll快速修复方法

今天&#xff0c;我将和大家分享一个关于电脑计算机中丢失concrt140.dll文件的问题及其修复方法。希望通过这次演讲&#xff0c;能够帮助大家解决在日常使用电脑过程中遇到的问题&#xff0c;提高我们的工作效率。 首先&#xff0c;让我们来了解一下concrt140.dll是什么。concr…
阅读更多...
爬虫--爬取自己想去的目的的车票信息

爬虫--爬取自己想去的目的的车票信息

前言&#xff1a; 本篇文章主要作为一个爬虫项目的小练习&#xff0c;来给大家进行一下爬虫的大致分析过程以及来帮助大家在以后的爬虫编写中有一个更加清晰的认识。 一&#xff1a;环境配置 Python版本&#xff1a;3.7 IDE:PyCharm 所需库&#xff1a;requests&#xff0…
阅读更多...
ShardingJDBC——基于JPA的读写分离实战

ShardingJDBC——基于JPA的读写分离实战

摘要 本博文主要介绍基于JPA的读写分离实战&#xff0c;帮助大家更好的学会使用读写分离。透明化读写分离所带来的影响&#xff0c;让使用方尽量像使用一个数据库一样使用主从数据库集群&#xff0c;是ShardingSphere读写分离模块的主要设计目标。 一、读写分离库的场景和设计…
阅读更多...
CSRF与XSS结合利用

CSRF与XSS结合利用

文章目录 修改cms网站后台管理员密码成功登录总结 修改cms网站后台管理员密码 CSRF和XSS结合的JS代码&#xff1a; <script> xmlhttp new XMLHttpRequest(); xmlhttp.open("post","http://10.4.7.130/cms/admin/user.action.php",false); xmlhttp…
阅读更多...
【位运算】leetcode面试题：消失的两个数字

【位运算】leetcode面试题：消失的两个数字

一.题目描述 消失的两个数字 二.思路分析 本题难度标签是困难&#xff0c;但实际上有了只出现一次的数字iii这道题的铺垫&#xff0c;本题的思路还是很容易想到的。 温馨提示&#xff1a;阅读本文前可以先查看我的【位运算】专栏的第一篇文章&#xff0c;其中包含位运算这类…
阅读更多...
NFTScan | 08.21~08.27 NFT 市场热点汇总

NFTScan | 08.21~08.27 NFT 市场热点汇总

欢迎来到由 NFT 基础设施 NFTScan 出品的 NFT 生态热点事件每周汇总。周期&#xff1a;2023.08.21~ 2023.08.27 NFT Hot News 01/ NFT 品牌体验平台 Recur 将于 11 月 16 日彻底关闭&#xff0c;此前曾获 5000 万美元融资 8 月 21 日&#xff0c;NFT 品牌体验平台 Recur 在 X…
阅读更多...
微信小程序 - 2023年最新版手机号快捷登录详细教程

微信小程序 - 2023年最新版手机号快捷登录详细教程

前言 最近开发公司手机快捷登录的功能&#xff0c;花费了不少时间&#xff0c;这里附上详细教程。 这里以海底捞小程序的图片为例&#xff0c;如有侵权请联系小编删除。 代码如下 <button open-type"getPhoneNumber" getphonenumber"getPhoneNumber"…
阅读更多...
8.31作业

8.31作业

一、面试题 1、什么是多态、虚函数、纯虚函数 多态是一种行为的多种实现方式&#xff0c;通过虚函数和虚指针来实现。是子类对父类虚函数重写然后父类通过虚指针调用重写后的实现。虚指针在类的最前面会指向一个虚函数表。里面记录了虚函数包括子类重写的。虚函数就是在函数前…
阅读更多...
Linux(CentOS7)下如何配置多个Tomcat容器？

Linux(CentOS7)下如何配置多个Tomcat容器？

一、在 liunx 系统安装 jdk 1、安装jdk&#xff08;yum install 安装&#xff09; 查看是否系统是否自带jdk并卸载 rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 其中&#xff0c;GCJ是GNU的Java编译器,可以把java程序编译成本地代码&#xff0c;编译成功后的可…
阅读更多...
Mybatis 动态SQL – 使用if, where标签动态生成条件语句

Mybatis 动态SQL – 使用if, where标签动态生成条件语句

前面几篇我们介绍了使用Mybatis进行数据的增删改查&#xff0c;并且也了解了如何在Mybatis中使用JDK的日志系统打印日志&#xff1b;本篇我们继续介绍如何使用Mybatis提供的if,where标签动态生成条件语句。 如果您对数据的增删改查和Mybatis集成JDK日志系统不太了解&#xff0…
阅读更多...
九、MySQL(DQL基础查询)如何查询表中信息？

九、MySQL(DQL基础查询)如何查询表中信息？

1、DQL基础用法&#xff1a; 2、实例&#xff1a; &#xff08;1&#xff09;初始化表格&#xff1a; # 创建表头 create table things(id int comment 编号,number int comment 学号,name char(5) comment 姓名,address char(6) comment 地址,phone number int comment 电话…
阅读更多...
stable diffusion实践操作-VAE

stable diffusion实践操作-VAE

本文专门开一节写图生图相关的内容&#xff0c;在看之前&#xff0c;可以同步关注&#xff1a; stable diffusion实践操作 VAE&#xff0c;全名Variational autoenconder&#xff0c;中文叫变分自编码器。作用是&#xff1a;滤镜微调 &#xff0c;名字中带有vae&#xff0c;后…
阅读更多...
AI图像行为分析算法 opencv

AI图像行为分析算法 opencv

AI图像行为分析算法通过pythonopencv深度学习框架对现场操作行为进行全程实时分析&#xff0c;AI图像行为分析算法通过人工智能视觉能够准确判断出现场人员的作业行为是否符合SOP流程规定&#xff0c;并对违规操作行为进行自动抓拍告警。OpenCV是一个基于Apache2.0许可&#xf…
阅读更多...
ViT论文Pytorch代码解读

ViT论文Pytorch代码解读

ViT论文代码实现 论文地址&#xff1a;https://arxiv.org/abs/2010.11929 Pytorch代码地址&#xff1a;https://github.com/lucidrains/vit-pytorch ViT结构图 调用代码 import torch from vit_pytorch import ViTdef test():v ViT(image_size 256, patch_size 32, num_cl…
阅读更多...
Rust 学习笔记（持续更新中…）

Rust 学习笔记（持续更新中…）

一、 编译和运行是单独的两步 运行 Rust 程序之前必须先编译&#xff0c;命令为&#xff1a;rustc 源文件名 - rustc main.rs编译成功之后&#xff0c;会生成一个二进制文件 - 在 Windows 上还会生产一个 .pdb 文件 &#xff0c;里面包含调试信息Rust 是 ahead-of-time 编译的…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站