当前位置：首页 > news >正文

CSS学习记录03

news 来源：原创 2025/5/7 9:37:25

CSS背景

CSS 背景属性用于定义元素的背景效果。

CSS background-color

background-color属性指定元素的背景色。

页面的背景色设置如下：

body {background-color: lightblue;
}

通过CSS，颜色通常由以下方式指定：

有效的颜色名称-比如“red"
十六进制值-比如”#ff0000"
RGB值-比如“rgb（255,0,0)"

其他元素

您可以为任何HTML元素设置背景颜色：

举例：<h1>、<p> 和 <div> 元素将拥有不同的背景色：

h1 {background-color: green;
}div {background-color: lightblue;
}p {background-color: yellow;
}

不透明度/透明度

opacity属性指定元素的不透明度/透明度。取值范围0.0 -1.0。值越低，越透明：

div {background-color: green;opacity: 0.3;
}

注意：使用opactiy属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用RGBA的透明度

如果您不希望对子元素应用不透明度，请使用RGBA颜色值。下面的例子背景色而不是文本的不透明度：

div {background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

CSS背景图像

background-image 属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。

例如：

页面的背景图像可以像这里设置：

body {background-image: url("paper.gif");
}

注意：使用背景图象时，请使用不会干扰文本的图像。还可以为特定元素设置背景元素，例如<p>元素：

p {background-image: url("paper.gif");
}

CSS背景重复

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。某些图像只适合水平或垂直方向上重复。

body {background-image: url("gradient_bg.png");
}

如果上面的图像仅在水平方向上重复（background-repeat: repeat-x;),则背景看起来会更好：

body {background-image: url("gradient_bg.png");background-repeat: repeat-x;
}

提示：如需垂直重复图像，请设置 background-repeat: repeat-y。

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

背景图像仅显示一次：

body {background-image: url("tree.png");background-repeat: no-repeat;
}

CSS background-position

background-position 属性用于指定背景图像的位置

举例：

把背景图片放在右上角：

body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;
}

CSS 背景附着

CSS background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

指定应该固定背景图像：

body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: fixed;
}

指定背景图像应随页面的其余部分一起滚动：

body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: scroll;
}

CSS背景简写

如需缩短代码，也可以在一个属性中指定所有背景属性，它被称为简写属性。

body {background-color: #ffffff;background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;
}

使用简写属性在一条声明中设置背景属性：

body {background: #ffffff url("tree.png") no-repeat right top;
}

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。

所有 CSS 背景属性

属性	描述
background	在一条声明中设置所有背景属性的简写属性。
background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip	规定背景的绘制区域。
background-color	设置元素的背景色。
background-image	设置元素的背景图像。
background-origin	规定在何处放置背景图像。
background-position	设置背景图像的开始位置。
background-repeat	设置背景图像是否及如何重复。
background-size	规定背景图像的尺寸。

补充知识

background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

 h1 {background: url(./assets/img/161105-17318310655d07.jpg);background-clip: text;color:transparent;font-size: 200px;background-origin: left;}

如果没有设置(background-image）或背景颜色（background-color），那么这个属性只有在边框（ border ）被设置为非固实（soild）、透明或半透明时才能看到视觉效果，否则，本属性产生的样式变化会被边框覆盖。

background-origin

background-origin规定了背景图片background-image属性的原点位置的背景相对区域。注意：当使用background-attachment为 fixed 时，该属性将被忽略不起作用。

/* 关键字值 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

background-size

background-size设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

/* 关键字 */
background-size: cover
background-size: contain

注意：没有被背景图片覆盖的背景区域仍然会显用background-color属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。

cover：

缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。

contain:

缩放背景图片以完全装入背景区，可能背景区部分空白。

CSS学习记录03

CSS背景 CSS 背景属性用于定义元素的背景效果。 CSS background-color background-color属性指定元素的背景色。页面的背景色设置如下： body {background-color: lightblue; } 通过CSS，颜色通常由以下方式指定： 有效的颜色名称-比如“…...

编程日记 2025/5/7 9:37:25

在Java中使用Apache POI导入导出Excel（二）

本文将继续介绍POI的使用，上接在Java中使用Apache POI导入导出Excel（一） 使用Apache POI组件操作Excel（二） 14、读取和重写工作簿 try (InputStream inp new FileInputStream("workbook.xls")) { //Inpu…...

编程日记 2025/5/4 12:57:56

Vue3学习宝典

1.ref函数调用的方式生成响应式数据，可以传复杂和简单数据类型 <script setup> // reactive接收一个对象类型的数据 import { reactive } from vue;// ref用函数调用的方式生成响应式数据，可以传复杂和简单数据类型 import { ref } from vue // 简…...

编程日记 2025/5/5 17:51:50

Unity开发FPS游戏之完结篇

这个系列的前几篇文章介绍了如何从头开始用Unity开发一个FPS游戏，感兴趣的朋友可以回顾一下。这个系列的文章如下： Unity开发一个FPS游戏_unity 模仿开发fps 游戏-CSDN博客 Unity开发一个FPS游戏之二_unity 模仿开发fps 游戏-CSDN博客 Unity开发一个F…...

编程日记 2025/4/29 12:50:48

基于BM1684的AI边缘服务器-模型转换，大模型一体机（二）

目标追踪注：所有模型转换都是在docker环境中的先进入docker 这里我们是要在docker环境里编译的，所以先进入docker :~/tpu-nntc# docker run -v $PWD/:/workspace -it sophgo/tpuc_dev:latest初始化环境 root2bb02a2e27d5:/workspace/tpu-nntc# s…...

编程日记 2025/5/1 12:51:12

IDEA连接Apifox客户端

IDEA连接Apifox客户端一、下载Apifox安装包二、IDEA配置三、配置Apifox和IDEA项目同步一、下载Apifox安装包 Apifox官网，根据自己的操作系统下载对应的Apifox安装包，我是windows系统所以下载的是windows版。下载默认仅为我安装，点击下一…...

编程日记 2025/5/7 9:33:52

vue中引用svg图标

要在 Vue 项目中引用 SVG 图标，有几种常见的方法。这里我将介绍两种方法：一种是直接在组件中内联 SVG 代码，另一种是将 SVG 作为单独的文件引用。方法一：内联 SVG 代码你可以直接在 Vue 组件的模板中嵌入 SVG 代码。这种方法适…...

编程日记 2025/5/4 6:49:07

【Laravel】模型封装属性基础

文章目录概要什么是封装模型属性？使用访问器和修改器封装属性访问器（Accessor）修改器（Mutator）测试业务实现运行结果小结概要随着项目规模的扩大，模型中的属性和方法可能会变得越来越复杂，这…...

编程日记 2025/4/30 12:02:28

【ROS编译未来时间戳报错修正】一种无需重零编译的文件时间戳更新方法分享

问题描述无论在ROS1还是ROS2使用catkin_make或者colcon build指令后，有时候会出现文件时间戳的问题，通常报错的内容大致如下文件的修改时间在未来XX秒后，警告：检测到时钟错误。您的构建版本可能是不完整的。解决方法不完美的…...

编程日记 2025/4/26 0:11:15

tauri使用github action打包编译多个平台arm架构和inter架构包踩坑记录

这些error的坑，肯定是很多人不想看到的，我的开源软件PakePlus是使用tauri开发的，PakePlus是一个界面化将任何网站打包为轻量级跨平台软件的程序，利用Tauri轻松构建轻量级多端桌面应用和多端手机应用，为了实现发布的时候…...

编程日记 2025/5/1 1:07:29

事务常见分类

目录 1.扁平事务 2.带有保存点的扁平事务 3.链事务 4.嵌套事务 5.分布式事务从事务理论的角度来看，可以把事务分为以下几种类型： 扁平事务（Flat Transactions） 带有保存点的扁平事务（Flat Transactions with Sa…...

编程日记 2025/5/4 4:41:48

深度学习案例：ResNet50模型+SE-Net

本文为为🔗365天深度学习训练营内部文章原作者：K同学啊一回顾ResNet模型 ResNet，即残差网络，是由微软研究院的Kaiming He及其合作者于2015年提出的一种深度卷积神经网络架构。该网络架构的核心创新在于引入了“残差连接”&…...

编程日记 2025/5/4 4:38:59

第三方Cookie的消亡与Google服务器端标记的崛起

随着互联网用户对隐私保护的关注日益增强，各大浏览器正在逐步淘汰第三方Cookie。这一变革深刻影响了广告商和数字营销人员的用户跟踪和数据分析方式。然而，Google推出的服务器端标记技术为这一挑战提供了新的解决方案。什么是第三方Cookie？ …...

编程日记 2025/5/4 21:02:12

arkTS：使用ArkUI实现用户信息的持久化管理与自动填充（PersistentStorage）

arkUI：使用ArkUI实现用户信息的持久化管理与自动填充（PersistentStorage） 1 主要内容说明2 例子2.1 登录页2.1.1登陆页的相关说明2.1.1.1 持久化存储的初始化2.1.1.2 输入框2.1.1.3 记住密码选项2.1.1.4 登录按钮的逻辑2.1.1.5 注册跳转 2.1.…...

编程日记 2025/5/4 22:02:11

01-Zabbix监控快速入门

01-Zabbix监控快速入门 1、监控知识基本概述1.1 什么是监控1.2 为何需要监控1.3 如何进行监控 2、单机时代如何监控2.1 监控CPU2.2 监控内存2.3 监控磁盘2.4 监控⽹络2.5 监控TCP2.6 监控脚本示例 3、常⻅的监控⽅案3.1 Cacti3.2 Nagios3.3 Zabbix3.4 Prometheus3.5 商业监控⽅…...

编程日记 2025/5/5 23:57:13

docker 怎么启动nginx

在Docker中启动Nginx容器是一个简单的过程。以下是启动Nginx容器的步骤： 拉取Nginx镜像： 首先，你需要从Docker Hub拉取Nginx的官方镜像。使用以下命令： docker pull nginx运行Nginx容器： 使用docker run命令来启动一个…...

编程日记 2025/5/1 23:34:54

1-1 Gerrit实用指南

注：学习gerrit需要拥有git相关知识，如果没有学习过git请先回顾git相关知识点黑马程序员git教程一小时学会git git参考博客 git 实操博客 1.0 定义 Gerrit 是一个基于 Web 的代码审查系统，它使用 Git 作为底层版本控制系统。Gerrit 的主要功…...

编程日记 2025/5/1 17:19:33

数据库深入(学习笔记)

多表查询概述： 多表查询：指从多张表中查询数据笛卡尔积：笛卡尔积是指在数学中，两个集合(A集合，B集合)的所有组合情况。分类： 连接查询内连接：相当于查询A、B交集部分数据隐式内连接:sele…...

编程日记 2025/5/7 1:33:27

PostgreSQL17.x创建数据库及数据库信息查看命令

PostgreSQL17.x创建数据库及数据库信息查看命令文章目录 PostgreSQL17.x创建数据库及数据库信息查看命令1.创建数据库1. 使用 SQL 命令创建数据库2. 创建数据库并指定字符集3. 验证数据库是否创建成功3. 远程连接1. 修改 PostgreSQL 配置文件2. 修改客户端认证配置4. 指定某个…...

编程日记 2025/5/1 4:51:14

Canal与Elasticsearch集成指南 [可视化工具](https://knife.blog.csdn.net/article/details/126348055)下载Canal 1.1.5版本 (alpha-2) 请从GitHub Releases下载Canal 1.1.5版本中间版本alpha-2。仅需下载canal.deployer和canal.adapter组件。安装Elasticsearch 确保已安装…...

编程日记 2025/5/4 12:59:26

React 前端框架1

一、React 简介 （一）什么是 React React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开源并维护。它采用了组件化的开发思想，允许开发者将复杂的 UI 拆分成一个个独立、可复用的小组件，就如同搭积木一般&am…...

编程日记 2025/5/1 14:38:35

什么是Batch Normalization？

一、概念 Batch Normalization是在2015年提出的数据归一化方法，主要用在深度神经网络中激活层之前。它的主要作用是加快模型训练时的收敛速度，使模型训练过程更加稳定，避免梯度爆炸或消失，并起到一定的正则化作用，有时…...

编程日记 2025/5/6 8:07:38

rtc-pcf8563 0-0051: low voltage detected, date/time is not reliable

解决方法： 1、先测量pcf8563电源电压，是否满足要求。 2、pcf8563首次操作。第一次读取pcf8563的时间，未初始化，非法，芯片门槛电压检测配置不合理。使用hwclock命令写入一次，即可解决。 hwclock -f /dev/…...

编程日记 2025/5/5 12:58:52

tauri下的两个常用rust web框架:Leptos和Trunk

tauri下有两个常用rust web框架，就是Leptos和Trunk Leptos Leptos 是一个基于 Rust 的 Web 框架。您可以在他们的官方网站上了解更多关于 Leptos 的信息。本指南适用于 Leptos 的 0.6 版本。 Leptos Leptos 是一个用 Rust 编写的现代、高效且安全的 Web 框架。它…...

编程日记 2025/5/6 16:00:50

vscode + conda + qt联合开发

安装vscode 安装conda 清华大学开源软件镜像(Anaconda下载)_清华大学镜像-CSDN博客 conda create新建一个环境，激活这个环境，然后安装pyside6 pip install pyside6 -i https://pypi.tuna.tsinghua.edu.cn/simple 安装成功后输入 pip list查看是否安装…...

编程日记 2025/4/29 22:15:51

mac终端自定义命令打开vscode

1.打开终端配置文件 open -e ~/.bash_profile终端安装了zsh，那么配置文件是.zshrc（打开zsh配置，这里举🌰使用zsh） sudo open -e ~/.zshrc 2.在zshrc配置文件中添加新的脚本（这里的code就是快捷命令可以进…...

编程日记 2025/5/6 9:05:46

关于单片机的原理与应用！

成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///目前正在学习C😊///持续分享所学😊///如有需要欢迎收藏转发///😊】今日分享关于单片…...

编程日记 2025/5/4 17:27:35

【手术显微镜】市场高度集中，由于高端手术显微镜的制造技术主要掌握于欧美企业

摘要 HengCe (恒策咨询）是全球知名的大型咨询机构，长期专注于各行业细分市场的调研。行业层面，重点关注可能存在“卡脖子”的高科技细分领域。企业层面，重点关注在国际和国内市场在规模和技术等层面具有代表性的企业，…...

编程日记 2025/5/7 9:33:52

速盾高防cdn支持移动端独立缓存

随着移动互联网的快速发展，移动端网页访问量也越来越大。然而，移动端的网络环境相对不稳定，用户体验可能会受到影响。因此，使用高防CDN来加速移动端网页访问，成为越来越多网站运营者的首选。速盾高防CDN是一种分布式…...

编程日记 2025/5/2 20:21:10

java中的运算符

大家好，今天来看看java中运算符的一些知识点，理解好运算符是我们在写代码的一大重点，那么我们就来看看吧。运算符:对操作数进行操作时的符号.,不同运算筹操作的含义不同. 一、算术算片. 1、基本四则运算符:加减乘除模(一*/%) 注意:都是二元…...

编程日记 2025/5/5 2:13:03

视频流媒体服务解决方案之Liveweb视频汇聚平台

一，Liveweb视频汇聚平台简介: LiveWeb是深圳市好游科技有限公司开发的一套综合视频汇聚管理平台，可提供多协议（RTSP/RTMP/GB28181/海康Ehome/大华，海康SDK等）的视频设备接入，支持GB/T28181上下级联&#xf…...

编程日记 2025/5/5 14:53:32

什么是六边形图？

什么是六边形图？） 为什么用六边形图？六边形图的构造原理如何绘制六边形图？（代码示例）结果解读总结六边形图是一种特殊的二维数据可视化方法，用来展示两个变量之间的关系。它用许多小的六边形&a…...

编程日记 2025/5/1 12:05:32

淘宝天猫API接口探索：店铺商品全览与拍立淘图片搜索实战

在当今的电商时代，淘宝和天猫作为两大巨头，为开发者提供了丰富的API接口，以实现与平台的数据交互。本文将带您探索如何使用淘宝天猫的API接口来获取店铺所有商品列表，以及如何通过拍立淘（图片搜索）功能找到…...

编程日记 2025/5/6 10:01:09

.net6.0 mvc 传递 model 实体参数（无法对 null 引用执行运行时绑定）

说一下情况： 代码没问题，能成功从数据库里查到数据，能将数据丢给ViewBag.XXXX, 在View页面也能获取到 ViewBag.XXXX的值，但是发布到线上后报这个错： Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: 无法对 …...

编程日记 2025/5/6 11:31:58

电子电气架构 --- 面向服务的汽车诊断架构

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：所有人的看法和评价都是暂时的，只有自己的经历是伴随一生的，几乎所有的担忧和畏惧，都是来源于自己的想象，只有你真的去做了，才会发现有多快乐。…...

编程日记 2025/5/6 16:36:16

困扰解决：mfc140u.dll丢失的解决方法，多种有效解决方法全解析

当电脑提示“mfc140u.dll丢失”时，这可能会导致某些程序无法正常运行，给用户带来不便。不过，有多种方法可以尝试解决这个问题。这篇文章将以“mfc140u.dll丢失的解决方法”为主题，教大家有效解决mfc140u.dll丢失。判断是否是“mf…...

编程日记 2025/5/4 5:56:58

OpenCV_Code_LOG

孔洞填充 void fillHole(const Mat srcBw, Mat &dstBw) {Size m_Size srcBw.size();Mat TempMat::zeros(m_Size.height2,m_Size.width2,srcBw.type());//延展图像srcBw.copyTo(Temp(Range(1, m_Size.height 1), Range(1, m_Size.width 1)));cv::floodFill(Temp, Point(…...

编程日记 2025/5/3 7:10:16

【python】OpenCV—Tracking（10.5）—dlib

文章目录 1、功能描述2、代码实现3、效果展示4、完整代码5、涉及到的库函数dlib.correlation_tracker() 6、参考 1、功能描述基于 dlib 库，实现指定类别的目标检测和单目标跟踪 2、代码实现 caffe 模型 https://github.com/MediosZ/MobileNet-SSD/tree/master/…...

编程日记 2025/5/5 15:47:30

音视频入门基础：MPEG2-TS专题（9）——FFmpeg源码中，解码TS Header的实现

一、引言 FFmpeg源码对MPEG2-TS传输流/TS文件解复用时，在通过read_packet函数读取出一个transport packet后，会调用handle_packet函数来处理该transport packet： static int handle_packets(MpegTSContext *ts, int64_t nb_packets) { //..…...

编程日记 2025/4/28 18:00:26

React 自定义钩子：useOnlineStatus

我们今天的重点是 “useOnlineStatus” 钩子，这是 React 自定义钩子集合中众多精心制作的钩子之一。 Github 的：https://github.com/sergeyleschev/react-custom-hooks import { useState } from "react" import useEventListener from &quo…...

编程日记 2025/5/6 3:27:15

【C++】vector

vector 是一种容器，广泛存在于多种编程语言中，如 C、Rust、Java 等。它是一种动态数组，可以存储任意类型的元素，并且可以根据需要自动调整大小。下面我将详细介绍 vector 的概念和使用方法，主要以 C 中的 std::vector …...

编程日记 2025/5/3 17:17:04

海外centos服务器如何更换yum镜像源

今天遇到一个海外服务器，需要更新yum源，发现使用国内的（阿里云，腾讯云，华为云等），都无法实现，正常更新，主要问题还是服务器的网络无法访问国内的，所以，本章教程，记录一下，我验证过的方法。 1、备份或删除源已经停止维护了，也可以将其直接删除，也不会有影响。如…...

编程日记 2025/5/7 5:08:35

go和python的遍历对比

Go 和 Python 都有强大的循环控制结构，但它们在实现和行为上有所不同，特别是关于索引变量的管理、迭代器的使用以及如何在循环中修改循环变量。以下是 Go 和 Python 循环的详细差异分析： 1. 循环类型： Go： Go 使用 …...

编程日记 2025/5/6 0:37:35

ML 系列：第 37 节 — 统计中的估计

文章目录一、说明二、统计学中估计的目的三、统计学中的估计类型四、什么是点估计量？4.1 基本概念4.2 点估计量的性质4.3 点估计与区间估计4.4 寻找点估计的常用方法五、区间估计5.1 什么是区间估计？5.1.1 置信区间5.1.2 预测区间5.1.3 容差区间Tolera…...

编程日记 2025/5/4 0:07:46

四、初识C语言（4）

一、作业：static修饰局部变量 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <string.h> //作业：static修饰局部变量 int sum (int a) {int c 0;static int b 3;c 1;b 2;return (abc); } int main() {int i 0;int a …...

编程日记 2025/5/6 0:27:22

不同云计算网络安全等级

导读云计算的本质是服务，如果不能将计算资源规模化/大范围的进行共享，如果不能真正以服务的形式提供，就根本算不上云计算。等级保护定级流程定级是开展网络安全等级保护工作的 “基本出发点”，虚拟化技术使得传统的网络边界变…...

编程日记 2025/5/4 21:32:43

基于深度学习的甲状腺结节影像自动化诊断系统(PyQt5界面+数据集+训练代码)

随着医学影像技术的发展，计算机辅助诊断在甲状腺结节的早期筛查中发挥着重要作用。甲状腺结节的良恶性鉴别对临床治疗具有重要意义，但传统的诊断方法依赖于医生的经验和影像学特征，存在一定的主观性和局限性。为了解决这一问题，本…...

编程日记 2025/5/2 16:56:23

Codigger Desktop：多样 Look 设计，全新 Game Look 带来趣味体验

Codigger Desktop提供了多种不同的Look设计，以满足用户的不同需求和偏好。包括Keyboard Look、Value Look、Game Look、Location Look、Size Look、Stage Look和Tile Look。 Keyboard Look：提供类似键盘布局的界面设计，方便用户快速访问常用功…...

编程日记 2025/5/4 17:44:35

redis下载、基础数据类型、操作讲解说明，持久化、springboot整合等

1 Redis是什么官网：https://redis.io 开发者：Antirez Redis诞生于2009年全称是Remote Dictionary Server 远程词典服务器，是一个基于内存的键值型NoSQL数据库。 Redis是一个开源的、高性能的键值对存储系统，它支持多种数据结构&…...

编程日记 2025/5/6 20:05:56

原生js上传图片

无样式上传图片创建一个 FormData 对象：这个对象可以用于存储数据。将文件添加到 FormData 对象：通过 append() 方法，将用户选择的文件添加到 formData 对象中。使用 fetch 发送请求：使用 fetch API 或者其他方法将 FormDat…...

编程日记 2025/5/6 14:59:45