11.前端--CSS-背景属性

news2024/12/23 19:41:58

1.背景颜色

样式名称:

     background-color 定义元素的背景颜色

使用方式:

     background-color:颜色值;

其他说明:

     元素背景颜色默认值是 transparent(透明)
     background-color:transparent;

代码演示:

在这里插入图片描述
在这里插入图片描述
背景色半透明
     background: rgba(0, 0, 0, 0.3);

  • 最后一个参数是 alpha 透明度,取值范围在 0~1之间
  • 我们习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);

2.背景图片

样式名称:

     background-image 定义元素的背景图片

使用方式:

     background-image : none | url (url)
在这里插入图片描述

其他说明:

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号

代码演示:

在这里插入图片描述
在这里插入图片描述

3.背景平铺

样式名称:

     background-repeat 设置元素背景图像的平铺

使用方式:

     background-repeat: repeat | no-repeat | repeat-x | repeat-y
在这里插入图片描述

代码演示:

在这里插入图片描述

在这里插入图片描述
repeat-x
在这里插入图片描述

4.背景图片位置

样式名称:

     background-position 属性可以改变图片在背景中的位置

使用方式:

     background-position: x y;
在这里插入图片描述

参数代表的意思是:x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

其他说明:

1、参数是方位名词

如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

2、参数是精确单位

如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中

3、参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标

5.背景图片固定

样式名称:

    background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

使用方式:

    background-attachment : scroll | fixed
在这里插入图片描述

6.背景样式合写

背景合写样式:

    background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

使用方式:

    background: transparent url(image.jpg) repeat-y fixed top ;

7.背景总结

在这里插入图片描述

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

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

相关文章

基于KVM两个RDMA端口通信测试 - RoCE传输模式下

目的 为验证KVM的RDMA两个节点node1 - node2之间能正常RoCE通信传输,检查三个nodes的集群网,能ping通是测试继续的基础条件 验证步骤 Server和Client进行 ib_send_bw命令行检验,启动server端等待Client的链接,使用带宽测试的参数…

Android 渲染机制

1 Android 渲染流程 一般情况下,一个布局写好以后,使用 Activity#setContentView 调用该布局,这个 View tree 就创建好了。Activity#setContentView 其实是通过 LayoutInflate 来把布局文件转化为 View tree 的(反射)…

Linux命令-top

1、top命令简介 top命令是linux系统常用命令之一,能够实时显示系统各个进程的资源占用情况,类似于windows系统的任务管理器。 需要注意的是:top命令监控的最小单位是进程,如果想监控更小单位时,就需要用到ps或者nets…

Science Robotics: 意大利IIT仿生软体机器人实验室研制具有自适应行为的软体生长机器人

FiloBot通过模仿攀爬植物的生长方式——通过在顶端增加材料来构建身体,实现在难以预测和复杂的环境中的导航。这种设计理念的核心在于能够适应多种地形并克服障碍,特别适用于密集森林或杂乱区域这样的非结构化环境。机器人使用添加制造技术(特…

【C/C++】C/C++编程——C++ 开发环境搭建

C的开发环境种类繁多,以下是一些常见的C 集成开发环境: AppCode :构建与JetBrains’ IntelliJ IDEA 平台上的用于Objective-C,C,C,Java和Java开发的集成开发环境CLion:来自JetBrains的跨平台的C/C的集成开…

解决git错误:error: failed to push some refs to ‘git xxx xxxx‘

目录 第一章、问题分析1.1)报错提示1.2)报错分析 第二章、解决方式2.1)方式1:直接pull2.2)方式2:直接pull2.3)方式三 友情提醒: 先看文章目录,大致了解文章知识点结构,点…

2024美赛数学建模思路 - 案例:退火算法

文章目录 1 退火算法原理1.1 物理背景1.2 背后的数学模型 2 退火算法实现2.1 算法流程2.2算法实现 建模资料 ## 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 退火算法原理 1.1 物理背景 在热力学上&a…

Canvas-Editor 实现类似 Word 协同编辑

前言 对于word的协同编辑,已经构思很久了,但是没有找到合适的插件。今天推荐基于canvas/svg 的富文本编辑器 canvas-editor,能实现类似word的基础功能,如果后续有更好的,也会及时更新。 Canvas-Editor 效果图 官方文…

C语言|算术操作符相关题目

下面代码的结果是&#xff1a;( ) #include <stdio.h> int main() {int a, b, c;a 5;c a;b c, c, a, a;b a c;printf("a %d b %d c %d\n:", a, b, c);return 0; }A.a 8 b 23 c 8 B.a 9 b 23 c 8 C.a 9 b 25 c 8 D.a 9 b 24 c 8 解析&…

UART接口简介

UART(UniversalAsynchronousReceiver/Transmitter)&#xff0c;即通用异步收发器&#xff0c;它包括了RS232、RS449、RS423、RS422和RS485等接口标准规范和总线标准规范&#xff0c;即UART是异步串行通信口的总称。而RS232、RS449、RS423、RS422和RS485等&#xff0c;是对应各种…

使用QT写个自用的串口助手

遇到一个默认波特率1.5M的终端设备&#xff0c;看了下手上常用的串口助手竟然没有这个选项&#xff0c;所以干脆自己用QT手撕一个。 开发环境&#xff1a;QT 5.12.0 mingw64 一、创建工程 1、新建创建QMainWindow工程&#xff0c;基类可以选择QMainWindow也可以选择Qwiget&a…

ATF(TF-A)安全通告TF-V11——恶意的SDEI SMC可能导致越界内存读取(CVE-2023-49100)

目录 一、ATF(TF-A)安全通告TFV-11 (CVE-2023-49100) 二、透过事务看本质SDEI是干啥的呢&#xff1f; 三、CVE-2023-49100 1、GICv2 systems 2、GICv3 systems 四、漏洞修复 一、ATF(TF-A)安全通告TFV-11 (CVE-2023-49100) Title 恶意的SDEI SMC可能导致越界内存读取&am…

SwiftUI 打造酷炫流光边框 + 微光滑动闪烁的 3D 透视滚动卡片墙

功能需求 有时候我们希望自己的 App 能向用户展示与众不同、富有创造力的酷炫视觉效果: 如上图所示,我们制作了一款流光边框 + 微光滑动闪烁的 3D 透视卡片滚动效果。这是怎么做到的呢? 在本篇博文中,您将学到以下内容 功能需求1. 3D 透视滚动2. 灵动边框流光效果3. 背景…

np.bincount函数的用法

官网写的非常清晰了&#xff0c; 返回数组的数量比x中的最大值大1&#xff0c;它给出了每个索引值在x中出现的次数。下面&#xff0c;我举个例子让大家更好的理解一下&#xff1a; np.bincount(np.array([0, 1, 1, 3, 2, 1, 7])) array([1, 3, 1, 1, 0, 0, 0, 1])最大值是7&a…

5.3 内容管理模块 - 课程发布、任务调度、页面静态化、熔断降级

内容管理模块 - 课程发布 - 任务调度、熔断降级、页面静态化 文章目录 内容管理模块 - 课程发布 - 任务调度、熔断降级、页面静态化一、课程发布 - 任务调度1.1 添加Maven依赖1.2 XxlJobConfig配置文件1.3 消息处理抽象类 MessageProcessAbstract1.4 课程发布任务类 CoursePubl…

webpack常用配置

1.webpack概念 ​ 本质上&#xff0c;webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时&#xff0c;它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)&#xff0c;然后将你项目中所需的每一个模块组合成一个或多个 …

go语言(十六)----tag

package mainimport ("fmt""reflect" )type resume struct {Name string info:"name" doc:"我的名字"Sex string info:"sex" }func findTag(str interface{}) {t : reflect.TypeOf(str).Elem()for i : 0;i < t.NumField…

Go后端开发 -- 即时通信系统

Go后端开发 – 即时通信系统 文章目录 Go后端开发 -- 即时通信系统一、即时通信系统1.整体框架介绍2.基础server构建3.用户上线及广播功能4.用户消息广播机制5.用户业务封装6.用户在线查询7.修改用户名8.超时强踢9.私聊功能10.完整代码 二、客户端实现1.建立连接2.命令行解析3.…

阿里云幻兽帕鲁服务器租用价格表,免费?

幻兽帕鲁异常火爆自建幻兽帕鲁服务器不卡又稳定&#xff0c;继腾讯云推出幻兽帕鲁自建服务器教程和4核16G幻兽帕鲁专用特价游戏服务器后&#xff0c;阿里云坐不住了&#xff0c;直接推出特价4核32G和4核16G的palworld专属游戏机&#xff0c;另外还可以申请免费3个月的4核8G无影…

C语言或C++通过IShellLinkA创建或解析lnk快捷方式(使用char字符数组)

本例程用到的COM接口有IShellLinkA和IPersistFile。 请注意因为函数参数的类型不为BSTR&#xff0c;所以这两个接口可直接传char *或wchar_t *字符串&#xff0c;不需要提前转化为BSTR类型。 C语言的写法&#xff1a; /* 这个程序只能在C编译器下编译成功, 请确保源文件的扩展…