21.3 CSS 背景属性

news2024/11/14 21:10:51

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.coloradmin.cn/o/958561.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微芯I/O控制器瞄准工业与嵌入式运算应用

微芯I/O控制器瞄准工业与嵌入式运算应用

微芯科技(Microchip Technology)日前发布SCH322X系列I/O控制器新品&#xff0c;该系列产品基于工业及嵌入式开发工程师的需求而开发&#xff0c;功能丰富且具高灵活性。新一代I/O控制器系列拥有尺寸更小的包装和更长的产品生命周期&#xff0c;可运用于更多经济型工业及嵌入式开…
阅读更多...
DSP_TMS320F28377D_算法加速方法3_使用TMU库加速

DSP_TMS320F28377D_算法加速方法3_使用TMU库加速

继上两篇方法 DSP_TMS320F28377D_算法加速方法1_拷贝程序到RAM运行_江湖上都叫我秋博的博客-CSDN博客 DSP_TMS320F28377D_算法加速方法2_添加浮点运算快速补充库rts2800_fpu32_fast_supplement.lib_江湖上都叫我秋博的博客-CSDN博客 之后&#xff0c;本文继续讨论第三种DSP算法…
阅读更多...
Google Pay外包开发流程

Google Pay外包开发流程

集成 Google Pay 可以为你的应用提供方便的支付体验。下面是一个简要的 Google Pay 集成流程概述&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.创建 Google 开发者账号&#xff1a; 如果你还没有…
阅读更多...
激活函数总结（二十六）：激活函数补充(Probit、Smish)

激活函数总结（二十六）：激活函数补充(Probit、Smish)

激活函数总结&#xff08;二十六&#xff09;&#xff1a;激活函数补充 1 引言2 激活函数2.1 Probit 激活函数2.2 Smish 激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、Leaky ReLU、PReLU、Swish、ELU、SELU、GELU、Softmax、…
阅读更多...
CUDA小白 - NPP(2) - Arithmetic and Logical Operations(1)

CUDA小白 - NPP(2) - Arithmetic and Logical Operations(1)

cuda小白 原文链接 NPP GPU架构近些年也有不少的变化&#xff0c;具体的可以参考别的博主的介绍&#xff0c;都比较详细。还有一些cuda中的专有名词的含义&#xff0c;可以参考《详解CUDA的Context、Stream、Warp、SM、SP、Kernel、Block、Grid》 常见的NppStatus&#xff0c…
阅读更多...
Sentinel配置的blockHandler方法不生效

Sentinel配置的blockHandler方法不生效

①首先配置流控的资源名跟SentinelResource中的Value配置的一定要一直且唯一 ②其次blockhandler后面的方法一定要跟下面指定的方法名称是一样的 ③也就是我犯下的错误&#xff0c;一定要注意是上面那个才是Sentinel的&#xff0c;下面的是sun公司的…我说呢&#xff0c;一直…
阅读更多...
Java“牵手”京东商品列表数据，关键词搜索京东商品数据接口，京东API申请指南

Java“牵手”京东商品列表数据，关键词搜索京东商品数据接口，京东API申请指南

京东商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取京东商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问京东商城的网页来获取商品详情信息。以下是两种常用方法的介绍&…
阅读更多...
Nacos 配置管理及相关使用

Nacos 配置管理及相关使用

文章目录 Nacos 配置管理一、统一配置管理1、在Nacos 中添加配置文件2、从微服务拉取配置3、配置实现步骤&#xff08;1&#xff09;引入 nacos-config 依赖&#xff08;2&#xff09;添加 bootstrap.yml&#xff08;4&#xff09;在 nacos 中添加配置 二、配置热更新1、配置热…
阅读更多...
Sentry 是一个开源的错误监控和日志聚合平台-- 通过docker-compose 安装Sentry

Sentry 是一个开源的错误监控和日志聚合平台-- 通过docker-compose 安装Sentry

概述 Sentry 是一个开源的错误监控和日志聚合平台&#xff0c;用于帮助开发团队实时监控和调试应用程序中的错误和异常。它可以捕获应用程序中的错误和异常&#xff0c;并提供详细的错误报告&#xff0c;包括错误堆栈跟踪、环境信息、用户信息等。这些报告可以帮助开发团队快速…
阅读更多...
关于C语言参数传递的

关于C语言参数传递的

一、C语言参数传递是整体带入 #include <stdio.h> #define DF(a,b) (a2*b) int main() { int s5; int k DF((s1),(s-3)); printf("%d",k); }输出结果 原因&#xff1a; #define DF(a,b) (a2*b) int k DF((s1),(s-3)); //等效 int k DF((s1)2 * (s-3)); …
阅读更多...
CRM软件排行榜靠前的都有哪些特点？

CRM软件排行榜靠前的都有哪些特点？

CRM软件是企业管理客户关系的重要工具&#xff0c;它可以帮助企业提高销售效率、增强客户满意度、提升市场竞争力。在众多的CRM软件中&#xff0c;排名靠前的CRM软件有哪些&#xff1f; 1、功能全面 Zoho CRM提供了从销售、营销、客服到AI人工智能、BI数据分析再到定制开发等…
阅读更多...
Dockerfile 使用教程

Dockerfile 使用教程

1.Dockerfile 1.1 什么是Dockerfile Dockerfile可以认为是 Docker镜像的描述文件&#xff0c;是由一系列命令和参数构成的脚本 。主要作用是 用来构建docker镜像的构建文件 。 通过架构图可以看出通过DockerFile可以直接构建镜像 1.2 Dockerfile解析过程 构建镜像步骤&#xf…
阅读更多...
Java中的Reference

Java中的Reference

1. 常用四种引用 快速记忆法&#xff1a;“硬(俗称的强引用) --> 软(SoftReference) --> 弱(WeakReference) --> 虚(PhantomReference)” 此处将常说的“强引用”记忆成“硬引用”可以对应到次席的“软引用”&#xff08;反义词&#xff1a;硬-软&#xff09;这样更容…
阅读更多...
ExpressLRS开源代码之框架结构

ExpressLRS开源代码之框架结构

ExpressLRS开源代码之框架结构 1. 源由2. Arduino应用框架3. ExpressLRS应用框架4. 硬件设计框架4.1 单天线4.2 双天线单PA4.3 双天线双PA 5. 应用软件设计6. 参考资料 1. 源由 最近为了理解《ExpressLRS开源之基本调试数据含义》&#xff0c;做了一些源代码的研读。 概念、文…
阅读更多...
Nginx基础+高级（2022版）：待更新

Nginx基础+高级（2022版）：待更新

1. 文章说明 说明&#xff1a;目前讲的是第一部分nginx核心技术篇&#xff0c;后需篇章会以第一部分为核心技术篇为基础来展开深度讲解&#xff0c;详情关注后续课程的发布。 2. 介绍和准备环境 2.1 介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器&#xf…
阅读更多...
WebDAV之π-Disk派盘 + 人升

WebDAV之π-Disk派盘 + 人升

人升是一款融入了游戏化元素的待办事项应用，旨在为用户提供一种记录待办事项的过程像玩游戏打怪升级的体验。该应用致力于在保持实用性的基础上，扩展应用的乐趣。 在实用性方面，人升提供了以下功能： – 简洁界面：符合Material Design的简约界面，使新建待办事项变得更加轻…
阅读更多...
嘉泰实业和您共创未来财富生活

嘉泰实业和您共创未来财富生活

每一次暖心的沟通都是一次公益,真诚不会因为它的渺小而被忽略;每一声问候都是一次公益,善意不会因为它的普通而被埋没。熟悉嘉泰实业的人都知道,这家企业不但擅长在金融理财领域里面呼风唤雨,同时也非常擅长在公益事业当中践行,属于企业的责任心,为更多有困难的群体带来大爱的传…
阅读更多...
【机器视觉】HALCON目标图像检测实践（零基础版非常有用！）

【机器视觉】HALCON目标图像检测实践（零基础版非常有用！）

开发环境&#xff1a; 基本思路&#xff1a; 灰度阈值处理特征提取 ps:思考&#xff1a;如何通过阈值处理后&#xff0c;后续缩小检测目标范围&#xff1f; 二值化、梯度阈值、自适应阈值等方法来增强图像的对比度&#xff0c;从而突出目标特征&#xff0c;进一步缩小检测目标…
阅读更多...
对话永洪科技CEO何春涛：专注BI，决胜AI时代丨数据猿专访

对话永洪科技CEO何春涛：专注BI，决胜AI时代丨数据猿专访

大数据产业创新服务媒体 ——聚焦数据 改变商业 大数据、云计算、人工智能为代表的新一代信息技术走向普及&#xff0c;数据驱动业务&#xff0c;逐渐成为现代化企业管理、运作的日常。对于年均复合增长率超过20%的国内商业智能&#xff08;BI&#xff09;市场而言&#xff0c…
阅读更多...
OpenHarmony 应用 ArkUI 状态管理开发范例

OpenHarmony 应用 ArkUI 状态管理开发范例

本文转载自《#2023 盲盒码 # OpenHarmony 应用 ArkUI 状态管理开发范例》&#xff0c;作者&#xff1a;zhushangyuan_ 本文根据橘子购物应用&#xff0c;实现 ArkUI 中的状态管理。 在声明式 UI 编程框架中&#xff0c;UI 是程序状态的运行结果&#xff0c;用户构建了一个 UI …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023