前端学习-css的背景(十六)

news2024/12/24 0:29:42

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

目录

前言

背景颜色

语法格式

背景图片

语法格式

背景平铺

语法格式

背景图片位置

语法格式

参数代表的意思

参数是方位名词

参数是精确单位

参数是混合单位

背景图像固定(背景附着)

背景复合写法

背景半透明

总结


前言

忙活一下午,最后整理出这一篇文档,简单介绍了css背景属性的常见用法,毕竟在开发中挺常见的,话不多说,我们开始学习吧


通过css背景属性,可以给页面元素添加背景样式

背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等

背景颜色

语法格式

background-color:颜色值:

一般情况下元素背景颜色默认值是transparent(透明),当然我们也可以手动指定背景颜色为透明色

背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo 或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置,(精灵图也是一种运用场景)

语法格式

背景平铺

如果需要在HTML页面上对背景图像进行平铺,可以使用background-repeat属性

语法格式

背景图片位置

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

语法格式

background-position:x y;

参数代表的意思

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

参数是方位名词

如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和 top left 效果一致

如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

参数是精确单位

如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标

如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中

参数是混合单位

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

背景图像固定(背景附着)

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

background-attachment后期可以制作视差滚动的效果background-attachment: scroll l fixed

背景复合写法

为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性background中,从而节约代码量

当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:

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

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

背景半透明

CSS3 为我们提供了背景颜色半透明的效果。background:rgba(0,0,0,0.3);最后一个参数是 alpha透明度,取值范围在0~1之间我们习惯把 0.3的0省略掉,写为background:rgba(0,0,0,.3);

注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响CSS3 新增属性,是IE9+版本浏览器才支持的但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

总结

功不唐捐,玉汝与成

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

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

相关文章

架构设计笔记-11-未来信息综合技术

知识要点 云原生架构原则包括:服务化原则、弹性原则、可观测原则、韧性原则、所有过程自动化原则、零信任原则和架构持续演进原则。 区块链是一种按照时间顺序将数据区块以顺序相连的方式组合成的一种链式数据结构,并以密码学方式保证的不可篡改和不可…

【项目案例】-音乐播放器-Android前端实现-Java后端实现

精品专题: 01.C语言从不挂科到高绩点 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. SpringBoot详细教程 https://blog.csdn.ne…

项目管理系统如何助力新药研发?药物研发企业康诺亚上线瑞杰项目管理系统

在新药研发过程中,其特点是:周期长、风险高、投入大,同时还要与其他科学相结合,相互渗透、更加需要多部门的共同参与,因此面临的问题相对复杂,而且要求也比较高。所以在这一过程中,必须对新药研…

软考系统分析师知识点十一:系统规划

前言 今年报考了11月份的软考高级:系统分析师。 考试时间为:11月9日。 倒计时:26天。 目标:优先应试,其次学习,再次实践。 复习计划第一阶段:扫平基础知识点,仅抽取有用信息&am…

49 | 桥接模式:如何实现支持不同类型和渠道的消息推送系统?

上一篇文章我们学习了第一种结构型模式:代理模式。它在不改变原始类(或者叫被代理类)代码的情况下,通过引入代理类来给原始类附加功能。代理模式在平时的开发经常被用到,常用在业务系统中开发一些非功能性需求&#xf…

嵌入式~CAN-专辑2

我自己的原文哦~ 只发CAN相关2 随时更新~~ 一、CAN总线错误分析与解决 从实际工作中碰到的具体问题来分析一些常见的CAN总线错误和解决办法。 CAN节点数据收发过程 我们知道,CAN总线上的每个节点往总线上发送数据的同时,会读取总线上的数据&#x…

stm32单片机个人学习笔记10(TIM编码器接口)

前言 本篇文章属于stm32单片机(以下简称单片机)的学习笔记,来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记,只能做参考,细节方面建议观看视频,肯定受益匪浅。 STM32入门教程-2023版 细…

简单实现手机投屏到电脑代码

1、从手机截图到sdcard 2、将图片导出到PC 3、从PC加载图片 4、开启定时器 1、 private static void takeScreenshot(String path) {long t1 System.currentTimeMillis();String command "adb devices"; // 替换为你需要执行的shell命令String command1 "…

氧化锆ZrO2纳米颗粒50nm|L-ZrO2@mSiO2|Ir1-N-C/ZrO2|AuPd/HB-ZrO2

氧化锆ZrO2纳米颗粒50nm|L-ZrO2mSiO2|Ir1-N-C/ZrO2|AuPd/HB-ZrO2 氧化锆(ZrO₂)纳米颗粒,特别是直径为50纳米(nm)的颗粒,是一种具有多种应用前景的功能材料。这种材料因其独特的物理和化学性质&#xff0c…

大一计算机课程之线性代数

《大一计算机课程之线性代数》 在大一的计算机课程中,线性代数是一门极为重要的基础学科,它就像一把神奇的钥匙,为计算机科学领域的诸多方面开启了智慧之门。 线性代数主要研究线性方程组、向量空间、线性变换等内容。对于计算机专业的学生…

Python基础语法条件

注释 注释的作用 通过用自己熟悉的语言,在程序中对某些代码进行标注说明,这就是注释的作用,能够大大增强程序的可读性。 注释的分类及语法 注释分为两类:单行注释 和 多行注释。 单行注释 只能注释一行内容,语法如下…

LabVIEW提高开发效率技巧----事件触发模式

事件触发模式在LabVIEW开发中是一种常见且有效的编程方法,适用于需要动态响应外部或内部信号的场景。通过事件结构(Event Structure)和用户自定义事件(User Events),开发者可以设计出高效的事件驱动程序&am…

深度探索:Linux CentOS 7内核的奥秘与管理之道

🐇明明跟你说过:个人主页 🏅个人专栏:《Linux :从菜鸟到飞鸟的逆袭》🏅 🔖行路有良友,便是天堂🔖 目录 一、引言 1、Linux简介 2、CentOS 7简介 3、什么是内核 …

【3dgs】总结3DGS与NeRF如何重塑SLAM(24年4月最新进展)

【3dgs】总结3DGS与NeRF如何重塑SLAM! 1. 摘要2. 简洁3. 背景3.1 Existing SLAM Surveys3.2 progress in Radiance Field Theory3.3.1 NeRF3.3.2 3dgs3.4 数据集 4 数据集4.1 SLAM3.1 RGB-D SLAM方法3.1.1 基于NeRF风格的RGB-D SLAM3.1.2 基于3DGS风格的 RGB-D SLAM…

PHP政务招商系统——高效连接共筑发展蓝图

政务招商系统——高效连接,共筑发展蓝图 🏛️ 一、政务招商系统:开启智慧招商新篇章 在当今经济全球化的背景下,政务招商成为了推动地方经济发展的重要引擎。而政务招商系统的出现,更是为这一进程注入了新的活力。它…

【C++】踏上C++学习之旅(一):初识C++和命名空间

文章目录 前言1. 初识C2. C的发展阶段2. 命名空间2.1 为什么要有命名空间?2.2 命名空间的语法2.3 命名空间的原理2.4 使用命名空间的三种方式2.4.1 加命名空间名称及作用域限定符( :: )2.4.2 使用using关键字将命名空间中某个成员 引入2.4.3 使用using namespace 命…

注意力机制篇 | 清华大学提出Focused Linear Attention取代Self-Attention成为ViT的新宠

前言:Hello大家好,我是小哥谈。Focused Linear Attention(聚焦线性注意力)是一种用于视觉Transformer模型的注意力机制,旨在提高效率和表现力,它解决了传统线性注意力方法的两个主要问题:聚焦能力和特征多样性。🌈 目录 🚀1.基础概念 🚀2.网络结构 🚀3.…

网络安全学习路线-适合入门小白

首先说明,我是一名CTF的web手,这是我自己亲身学习网络安全的路线,希望能够帮到大家,我虽然不是大牛,但我也希望能够帮助一些网安小白找到自己学习的方向,后面有就业的详细安全技术要求,如果真想…

大数据-170 Elasticsearch 云服务器三节点集群搭建 测试运行

点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…

基于知识图谱的宁夏非遗问答系统

八维视角探索宁夏非遗文化——基于知识图谱的非遗问答系统 作为一名程序员,能将大数据与文化传承结合,赋予历史新的生命,是件多么振奋的事!今天给大家介绍的是一款基于知识图谱技术的宁夏非物质文化遗产问答系统。无论你是学术研…