详解 CSS 的背景属性

news/2024/6/20 12:24:08

详解 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.hjln.cn/news/22.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

[spark] RDD 编程指南(翻译)

Overview 从高层次来看,每个 Spark 应用程序都包含一个driver program,该程序运行用户的main方法并在集群上执行各种并行操作。 Spark 提供的主要抽象是 resilient distributed dataset(RDD),它是跨集群节点分区的元素集合&…

贪心算法(算法竞赛、蓝桥杯)--修理牛棚

1、B站视频链接&#xff1a;A27 贪心算法 P1209 [USACO1.3] 修理牛棚_哔哩哔哩_bilibili 题目链接&#xff1a;[USACO1.3] 修理牛棚 Barn Repair - 洛谷 #include <bits/stdc.h> using namespace std; const int N205; int m,s,c,ans; int a[N];//牛的位置标号 int d[N…

蓝桥杯_中断系统

一 中断 中断&#xff0c;即cpu暂停执行当前程序&#xff0c;转而执行另外一段特殊程序&#xff0c;处理结束后。返回之前暂停程序继续执行。 中断向量&#xff0c;中断服务程序的入口地址&#xff0c;每个中断源都对应一个固定的入口地址。 中断服务函数&#xff0c;内核响应中…

目标检测卷王YOLO卷出新高度:YOLOv9问世

论文摘要:如今的深度学习方法重点关注如何设计最合适的目标函数,使得模型的预测结果能够最接近真实情况。 同时,必须设计一个适当的架构,可以帮助获取足够的信息进行预测。 现有方法忽略了一个事实,即当输入数据经过逐层特征提取和空间变换时,大量信息将会丢失。 本文将深…

代码遗产:探索祖传代码的历史、挑战与现代融合艺术

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…

Leetcode: 反转字符串中的单词 III

给定一个字符串 s &#xff0c;你需要反转字符串中每个单词的字符顺序&#xff0c;同时仍保留空格和单词的初始顺序。 思路&#xff1a;遍历字符串&#xff0c;将倒叙的字符插入临时字符串temp&#xff0c;遇到空格为判定条件&#xff0c;将res更新&#xff1b; #include <i…

SpringBoot整合rabbitmq-直连队列,没有交换机(一)

说明&#xff1a;本文章只是springboot和rabbitmq的直连整合&#xff0c;只使用队列生产和消费消息&#xff0c;最简单整合&#xff01; 工程图&#xff1a; A.总体pom.xml <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://…

自动驾驶框架:自动驾驶汽车定位-感知-规划-决策-控制概述,按照我的架构图理解:决策决定的是速度,规划决定的是路径(架构理解推荐)

1.按照我的架构图理解&#xff1a;决策决定的是速度&#xff0c;规划决定的是路径 参考链接&#xff1a;【自动驾驶】运动规划丨速度规划丨自动驾驶速度规划及状态协调方法 2.下面是参考别人的理解&#xff1a; 自动驾驶汽车定位-感知-规划-决策-控制概述 规划-决策-控制知…