详解 CSS 的背景属性

详解 CSS 的背景属性

previewfile_1991692168

背景颜色

语法: background-color: [指定颜色];

注:默认是 transparent (透明) 的,可以通过设置颜色的方式修改

示例代码:
image-20240223173025490

运行效果:
image-20240223173123327


背景图片

语法:background-image: url(...);

  • url 可以是绝对路径 也可以是相对路径
  • url 上可以加引号, 也可以不加.

比 image 标签更方便控制位置(图片在盒子中的位置)

示例代码
image-20240224132825189

运行效果
image-20240224133015726


背景平铺

语法:background-repeat: [平铺方式];

background-repeat的重要取值效果
repeat(默认值)平铺
no-repeat 不平铺
repeat-x水平平铺
repeat-y垂直平铺

注:背景颜色和背景图片可以同时存在,背景图片在背景颜色的上方

示例代码:
image-20240224134849607

运行效果:
image-20240224134927183


背景位置

修改图片的位置

语法:background-position: x y;

参数有三种风格:

  1. 方位名词:top, left, right, bottom。
  2. 精确单位:坐标或者百分比(以左上角为原点)
  3. 混合单位:同时包含方位名词和精确单位

注意:如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效);
如果只指定了一个方位名词, 则第二个默认居中(left 则意味着水平居中, top 意味着垂直居中)

示例代码:
image-20240224162427315

运行效果:
image-20240224162537448


背景尺寸

语法:background-size: length|percentage|cover|contain;

注意事项:

  • 可以填具体的数值: 如 40px 60px,表示宽度为 40px,高度为 60px
  • 可以填百分比:按照父元素的尺寸设置
  • cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。
  • contain:使用时不会让背景图像完全覆盖背景区域,会给背景区域的左右留出一部分区域

示例代码:
image-20240224171056662

运行效果:
image-20240224171211450

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oracle 设置权限 禁止删除用户

在Oracle中,可以通过修改系统角色来控制用户的操作权限。要禁止删除用户,需要将DROP USER这个特定的系统权限从相应的角色中移除。 下面是一种常见的方法,使用SQL语句进行操作: -- 创建新的角色,并为其分配所有必要的…

小苯的IDE括号问题(CD) -----牛客小白月赛87(双链表)

C题&#xff1a;C-小苯的IDE括号问题&#xff08;easy&#xff09;_牛客小白月赛87 (nowcoder.com) D题&#xff1a; D-小苯的IDE括号问题&#xff08;hard&#xff09;_牛客小白月赛87 (nowcoder.com) C题代码&#xff1a; #include<bits/stdc.h>using namespace std…

模型 OIIC(目标、障碍、洞察、挑战)

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_总纲目录。沟通方案工具。 1 OIIC(目标、障碍、洞察、挑战)模型的应用 1.1 OIIC 驱动的汽车配件渠道优化 一家知名的汽车配件制造商&#xff0c;旗下品牌拥有众多产品&#xff0c;其销售渠道广泛&#xff0c;不仅在…

【涨薪技术】掌握加密签名接口测试实战!

接口加密是指在网络传输过程中&#xff0c;将数据进行加密&#xff0c;以保护数据的安全性。接口加密可以采用多种加密算法&#xff0c;如AES、DES、RSA等。测试接口加密的目的是验证接口加密算法的正确性和安全性。 1加密与加密算法 加密&#xff08;Encrypt&#xff09;是将…

平衡,才是世界生生不息的真谛

凤凰涅槃&#xff0c;浴火重生。这句话是很有哲理的&#xff0c;可以运用到命运中。而对于命运&#xff0c;以中为最好&#xff0c;即是平衡。然而&#xff0c;每一个人&#xff0c;都是要经历命运的锤炼&#xff0c;无论怎样锤炼&#xff0c;都要保持一颗善良的心&#xff0c;…

day06-进程线程通信

1. 尝试处理普通信号 #include "test.h"#define MAXSIZE 128void handler(int signo) {if (SIGINT signo){printf("用户按下了 ctrl c 键\n");} }int main(int argc, char const *argv[]) {if (signal(SIGINT, SIG_IGN) SIG_ERR){perror("signal …

2024.02.23作业

1. 尝试处理普通信号 #include "test.h"#define MAXSIZE 128void handler(int signo) {if (SIGINT signo){printf("用户按下了 ctrl c 键\n");} }int main(int argc, char const *argv[]) {if (signal(SIGINT, SIG_IGN) SIG_ERR){perror("signal …

记录 | docker内执行apt update报错GPG error

1. 执行 sudo apt-get update 命令时遇到这个错误&#xff0c;是服务器没有这个公钥的意思 rootadmin:~# sudo apt-get update Get:1 https://download.docker.com/linux/ubuntu focal InRelease [36.2 kB] Err:1 https://download.docker.com/linux/ubuntu focal InRelease T…

Kaggle Intermediate ML Part Three——Pipeline

Step 1: Define Preprocessing Steps Understanding the Data: Data source: Where is the data coming from? What format is it in (e.g., CSV, JSON)? What does it represent?Data characteristics: What variables are present? What are their types (numerical, c…

【C++刷题】优选算法——双指针

移动零 void moveZeroes(vector<int>& nums) {size_t front 0;size_t back 0;while(back < nums.size() && nums[back] ! 0){back;}front back;while(back < nums.size()){if(0 nums[back]){back;}else{swap(nums[front], nums[back]); }} }…

Sora Text to Video 转换过程和技术要素的技术原理详细描述

转换过程&#xff1a; 初始化阶段&#xff1a;Sora 的转换过程从一个随机噪声图像开始。这个噪声图像是通过随机数生成器产生的&#xff0c;它代表了视频数据的初始状态&#xff0c;其中包含了大量的随机性和不确定性。 神经网络处理&#xff1a;这个噪声图像随后被送入一个预…

python 3.11中安装sympy(符号工具包)

1.python环境&#xff1a; 2.安装遇到问题&#xff1a; … 3.升级pip cmd命令行中&#xff0c;执行如下命令&#xff1a; python.exe -m pip installl --upgrade pip 4.再次安装sympy cmd命令行中&#xff0c;执行如下命令&#xff1a; pip install sympy 5.简单应用 对…

【坑】SpringBoot项目打包后的jar包非常小,只有4KB

一、SpringBoot项目打包后的jar包非常小&#xff0c;只有4KB? 1.1、解决方法 pom.xml中添加如下配置 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId>&l…

排列组合简单详解(附10题)(会员版)

非会员,不用注册会员也能看! https://blog.csdn.net/Runcode8/article/details/136274861https://blog.csdn.net/Runcode8/article/details/136274861 一、认识C,P,A: A.排列 A(x,y)=(x!)/[(x-y)!]=x(x-1)...(x-y+1) P.排列 P(x,y)=A(x,y) C.组合 C(x,…

Flink 1.11.0 版本介绍

Flink 1.11.0 发布于 2020 年,引入下面的新特性: 为了缓解 backpressure 下的 checkpointing 性能问题引入 unaligned checkpoints统一 Watermark Generator接口引入 Data Source API为 kubernates 引入新的部署模式:application modeUnaligned Checkpoints 触发一次 check…

针对无法确定连接参数的网口通讯PLC采集方案

年前碰到了一个需求&#xff0c; 需要针对倍福PLC进行数据采集&#xff0c; 搞定了PLC通讯协议后&#xff0c; 最大的问题出现了&#xff0c; 我们不知道PLC的密码&#xff0c; 没办法进入到PLC查询到点位&#xff0c; 而且也没办法对PLC设置路由&#xff0c; 导致没有办法连上…

构建生物医学知识图谱from zero to hero (2):文献抽取

我们选取一篇文献,将文献PDF转换成图片,然后采用pytesseract 实现图片文字识别。 import requests import pdf2image import pytesseractpdf = requests.get(https://arxiv.org/pdf/2110.03526.pdf) doc = pdf2image.convert_from_bytes(pdf.content)# Get the article text…

Linux笔记之LD_LIBRARY_PATH详解

Linux笔记之LD_LIBRARY_PATH详解 code review! 文章目录 Linux笔记之LD_LIBRARY_PATH详解1.常见使用命令来设置动态链接库路径2.LD_LIBRARY_PATH详解设置 LD_LIBRARY_PATH举例注意事项 3.替代方案使用标准路径编译时指定链接路径优先使用 rpath 还是 runpath&#xff1f;注意…

LeetCode 每日一题 2024/2/19-2024/2/25

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 2/19 590. N 叉树的后序遍历2/20 105. 从前序与中序遍历序列构造二叉树2/21 106. 从中序与后序遍历序列构造二叉树2/22 889. 根据前序和后序遍历构造二叉树2/23 2583. 二叉…

Spring Cloud学习

1、什么是SpringCloud Spring cloud 流应用程序启动器是基于 Spring Boot 的 Spring 集成应用程序&#xff0c;提供与外部系统的集成。Spring cloud Task&#xff0c;一个生命周期短暂的微服务框架&#xff0c;用于快速构建执行有限数据处理的应用程序。Spring cloud 流应用程…