CSS 背景

CSS 背景

背景颜色

背景颜色若不设置,默认为透明(transparent)

background-color: 颜色;

背景颜色半透明

background: rgba(0, 0, 0, 0.3)

前三个参数设定颜色,最后一个参数(例如上述例子中的0.3)设定透明度。0~1: 0对应透明,1对应实色

背景图片

常用于logo / 装饰性的小图片 / 超大背景图
该设定易于控制位置

background-image:  (url)

背景图片位置控制

background-position: x y;

x:x坐标
y:y坐标
可以使用方位名词或者精确单位

1、方位名词

left | right | center 对应水平方向
top | bottom | center 对应垂直方向
需求设定:水平居中 垂直靠上

background-portion: center top

注意:
(1)center top 与 top center 效果等价,即两者的顺序可交换
(2)若只写出一个方位,则另一个方位参数默认为center

2、精确单位

若使用精确坐标,两个方位输入有严格顺序

background-position: x y;

x严格对应水平方向,y严格对应垂直方向

eg:

background-position: 20px 50px;

20px对应与左边的距离为20px,50px对应与上边的距离为50px

3、混合单位

混合单位指:方位名词+精确单位
同理,两个方位有严格顺序。
eg:水平方向与左边距离20px,垂直方向居中。

background-position: 20px center;

背景平铺

对一个盒子设定背景图片,当图片尺寸小于盒子,则图片将重复以平铺满盒子(默认情况),如下图所示:请添加图片描述

完全不平铺

设定:

background-repeat: no-repeat; //不平铺

则背景图不会平铺满整个盒子,如下图所示:
请添加图片描述

仅x轴平铺

background-repeat: repeat-x;

请添加图片描述

仅y轴平铺

background-repeat: repeat-y;

请添加图片描述

背景平铺总结

请添加图片描述
注意:背景图片和颜色可以同时设定,但是图片会盖在颜色上方。

背景固定与滚动

background-attachment: fixed | scroll; 

fixed:背景图片固定
scroll:背景图片随着对象内容而滚动

背景属性复合写法

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

背景总结

在这里插入图片描述

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

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

相关文章

C语言strcmp函数讲解

strcmp函数介绍 在cplusplus官网上是这样介绍strcmp函数的 这里的意思是假如我们输入两个字符串一个是abcdef另一个也是abcdef他们两个字符的每个元素的ascii码值进行比较如果两个元素的ascii码值都相等就移动到下一个元素a与a进行比较b与b进行比较直到遇到\0为止&#xff0c…

论坛管理系统|基于Spring Boot+ Mysql+Java+B/S架构的论坛管理系统设计与实现(可运行源码+数据库+设计文档+部署说明+视频演示)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 目录 前台功能效果图 管理员功能登录前台功能效果图 用户功能模块 系统功能设计 数据库E-R图设计 l…

彩虹外链网盘界面UI美化版超级简洁好看

彩虹外链网盘界面UI美化版 彩虹外链网盘,是一款PHP网盘与外链分享程序,支持所有格式文件的上传,可以生成文件外链、图片外链、音乐视频外链,生成外链同时自动生成相应的UBB代码和HTML代码,还可支持文本、图片、音乐、…

Skywalking

1、简介 Skywalking是由国内开源爱好者吴晟开源并提交到Apache孵化器的开源项目, 2017年12月SkyWalking成为Apache国内首个个人孵化项目, 2019年4月17日SkyWalking从Apache基金会的孵化器毕业成为顶级项目, 目前SkyWalking支持Java、 .Net、 …

SSA-LSTM多输入分类预测 | 樽海鞘优化算法-长短期神经网络 | Matlab

目录 一、程序及算法内容介绍: 基本内容: 亮点与优势: 二、实际运行效果: 三、算法介绍: 四、完整程序下载: 一、程序及算法内容介绍: 基本内容: 本代码基于Matlab平台编译&am…

RabbitMQ自学笔记——消息可靠性问题

1.发送者的可靠性 1.1生产者重连 有时由于网络波动等原因,发送方一次可能没有连接上RabbitMQ,我们可以配置发送方的连接失败重试机制。但需要注意的是:SpringAMQP提供的重试机制是阻塞式的重试,也就是说多次重试等待的过程中&am…

考虑功率均分与电压频率的事件触发分布式二次控制MATLAB模型

微❤关注“电气仔推送”获得资料(专享优惠) 模型简介 此模型是在《基于事件触发机制的孤岛微电网二次电压与频率协同控制MATLAB仿真模型》上进一步创作的,之前的模型只考虑了二次电压与频率控制,并没有考虑均分这一项点。 因此…

Kafka MQ broker和集群

Kafka MQ broker和集群 broker和集群 一个独立的 Kafka 服务器被称为 broker。broker 接收来自生产者的消息,为消息设置偏移量,并提交消息到磁盘保存。broker 为消费者提供服务,对读取分区的请求作出响应,返回已经提交到磁盘上的…

C#重新认识笔记_ FixUpdate + Update

C#重新认识笔记_ FixUpdate Update Update: 刷新频率不一致,非物理对象的移动,简单的刷新可用, FixedUpdate: 刷新频率一致,按照固定频率刷新,一般调用FixedUpdate之后,会立即进入必要的物理计算中,因此,任何影响刚…

从零开始,一步步构建服务网格istio

一、环境情况 环境:Ubuntu20.04 机器数量:单机1台 IP:10.9.2.83 二、准备知识 为什么使用 Istio? Istio提供了一种更高级别的服务网格解决方案,它可以简化和加强 Kubernetes 集群中的服务间通信、流量管理、安全…

Unity制作马赛克效果

大家好,我是阿赵。   之前在玩怒之铁拳4里面,看到了马赛克场景转换的效果,觉得很有趣,于是也来做一下。 一、2D版本的马赛克转场效果 先看看视频效果: 马赛克转场 这里我是直接写shader实现的,我这里是把…

【2024-03-12】设计模式之模板模式的理解

实际应用场景:制作月饼 过程描述: 一开始,由人工制作月饼, 第一个:根据脑子里面月饼的形状,先涅出月饼的形状,然后放入面粉和馅料把开口合并起来。 第二个:根据脑子里面月饼的形状&…

Ajax (1)

什么是Ajax&#xff1a; 浏览器与服务器进行数据通讯的技术&#xff0c;动态数据交互 axios库地址&#xff1a; <script src"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 如何使用呢&#xff1f; 我们现有个感性的认识 <scr…

GSEA -- 学习记录

文章目录 brief统计学原理部分其他注意事项转录组部分单细胞部分 brief 上一篇学习记录写了ORA&#xff0c;其中ORA方法只关心差异表达基因而不关心其上调、下调的方向&#xff0c;也许同一条通路里既有显著高表达的基因&#xff0c;也有显著低表达的基因&#xff0c;因此最后…

基于LSTM实现春联上联对下联

按照阿光的项目做出了学习笔记&#xff0c;pytorch深度学习实战项目100例 基于LSTM实现春联上联对下联 基于LSTM&#xff08;长短期记忆网络&#xff09;实现春联上联对下联是一种有趣且具有挑战性的任务&#xff0c;它涉及到自然语言处理&#xff08;NLP&#xff09;中的序列…

Stable diffusion(一)

Stable diffusion 原理解读 名词解释 正向扩散&#xff08;Fixed Forward Diffusion Process&#xff09;&#xff1a;反向扩散&#xff08;Generative Reverse Denoising Process&#xff09; VAE&#xff08;Variational AutoEncoder&#xff09;&#xff1a;一个用于压缩图…

Mysql/Redis缓存一致性

如何保证MySQL和Redis的缓存一致。从理论到实战。总结6种来感受一下。 理论知识 不好的方案 1.先写MySQL&#xff0c;再写Redis 图解说明: 这是一幅时序图&#xff0c;描述请求的先后调用顺序&#xff1b; 黄色的线是请求A&#xff0c;黑色的线是请求B&#xff1b; 黄色的…

智慧城市与绿色出行:共同迈向低碳未来

随着城市化进程的加速&#xff0c;交通拥堵、空气污染、能源消耗等问题日益凸显&#xff0c;智慧城市与绿色出行成为了解决这些问题的关键途径。智慧城市利用信息技术手段&#xff0c;实现城市各领域的智能化管理和服务&#xff0c;而绿色出行则强调低碳、环保的出行方式&#…

LInux系统架构----Nginx模块rewrite的规则与应用场景

LInux系统架构----Nginx模块rewrite的规则与应用场景 一.rewrite跳转实现 Nginx实现跳转通过ngx_http_rewrite_module模块支持URL重写、支持if条件判断&#xff0c;但是不支持else跳转时&#xff0c;循环最多可以执行10次&#xff0c;超过后nginx将返回500错误注&#xff1a;…

STM32 | STM32F407ZE中断、按键、灯(续第三天)

上节回顾 STM32 | 库函数与寄存器开发区别及LED等和按键源码(第三天)一、 中断 中断概念 中断是指计算机运行过程中,出现某些意外情况需主机干预时,机器能自动停止正在运行的程序并转入处理新情况的程序,处理完毕后又返回原被暂停的程序继续运行(面试题)。 STM32外部中断…