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

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.mfbz.cn/a/343831.html

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

相关文章

盖子的c++小课堂:第二十六讲:双向链表

前言 谢谢各位粉丝的支持,望我早日突破1000粉 双向链表 干货!单链表从原理到实现——附python和C++两个版本 - 知乎单链表是链表家族中的一员,每个节点依旧由 数据域(data)和指针域(next)组成,链表的具体概念下面有介绍: 机器学习入坑者:程序员基本功——链表的基…

大数据学习之Flink算子、了解(Source)源算子(基础篇二)

Source源算子(基础篇二) 目录 Source源算子(基础篇二) 二、源算子(source) 1. 准备工作 2.从集合中读取数据 可以使用代码中的fromCollection()方法直接读取列表 也可以使用代码中的fromElements()方…

“探索C语言操作符的神秘世界:从入门到精通的全方位解析“

各位少年,我是博主那一脸阳光,今天来分享深度解析C语言操作符,C语言操作符能帮我们解决很多逻辑性的问题,减少很多代码量,就好比数学的各种符号,我们现在深度解剖一下他们。 前言 在追求爱情的道路上&…

Google ASPIRE框架:赋予大型语言模型(LLMs)自我评估的新动力

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

Vue生命周期;综合案例;工程化开发入门

Vue的生命周期 和 生命周期的四个阶段 思考: 什么时候可以发送初始化渲染请求?(越早越好:最早可以早到什么时候?) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命…

【C++】C++入门(一)

个人主页 : zxctsclrjjjcph 文章封面来自:艺术家–贤海林 如有转载请先通知 文章目录 1. 前言2. C关键字3. 命名空间3.1 命名空间定义3.2 命名空间的使用 4. C输入&输出 1. 前言 C是在C的基础之上,容纳进去了面向对象编程思想&#xff0…

4G物联网LED智慧路灯杆显示屏产品介绍

4GLED显示屏是一种具有4G网络连接功能的LED显示屏。它可以通过4G网络连接到互联网,实现远程管理和控制,方便进行内容更新和管理。同时,4GLED显示屏具有高亮度、高清晰度和高对比度的特点,可以提供清晰明亮的图像和视频展示效果。它…

【前端小点】Vue3中的IP输入框组件

本文章记录,如何在vue3项目开发中,使用ip输入框组件. 之前写过vue2版本的ip组件,为了更好的适应vue3,此次进行vue3代码重写 先上效果图: 禁用效果图: 主要是组件的开发,代码如下,可直接拷贝使用. 大概思路就是: 使用四个输入框拼接,然后给输入内容添加校验操作,添加光标移动,…

灵眸边缘计算产品学习

EASY EAI灵眸科技 | 让边缘AI落地更简单 (easy-eai.com) 产品简介 支持4路1080P30fps视频流采集,四核CPU1.5GHz与2Tops AI边缘算力能力。集成有以太网、Wi-Fi、4G等网络通信外设;RS232、RS485、UART等本地通信接口。HDMI显示屏接口、音频输入输出等交互…

ntp时间适配服务器和ssh免密登录

1.配置ntp时间服务器,确保客户端主机能和服务主机同步时间 服务端server向阿里时间服务器进行时间同步 第一步:定位服务端server #安装软件 [rootserver ~]# yum install chrony -y # 编辑配置文件,定位第3行,修改…

小程序直播项目搭建

项目功能: 登录实时聊天点赞功能刷礼物取消关注用户卡片直播带货优惠券直播功能 项目启动: 1 小程序项目创建与配置: 第一步 需要登录小程序公众平台的设置页面进行配置: 首先需要是企业注册的才可以个人不能开通直播功能。服务类…

动态gif图怎么在线做?简单三步快速上手

使用gif动态图片能够增加图片的吸引力和趣味性,在很多社交平台上gif动态都是用来表达自己的心情的。而且,gif动图可以用于创意设计和艺术制作的宣传等。那么,要怎么制作呢?这时候使用gif制作(https://www.gif.cn/&…

【学网攻】 第(6)节 -- 三层交换机实现VLAN间路由

文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口【学网攻】 第(4)节 -- 交换机划分Vlan【学网攻】 第(5)节 -- Cisco VTP的使用 前言 第5章给大家讲了VTP,也是为这节课铺垫,带领大家慢慢进入路由的区…

安全基础~通用漏洞2

文章目录 知识补充盲注Boolean盲注延时盲注报错注入二次注入 知识补充 盲注常用 if(条件,5,0) #条件成立 返回5 反之 返回0 left(database(),1),database() #left(a,b)从左侧截取a的前b位 盲注 盲注就是在注入过程中,获取的数据不能回显至前端页面。 …

vivado: 设置里配置改了之后,总是在下次重启时重置的解决

我以前改字体大小,和改notepad编辑器都遇到,下一次打开就又是默认配置 解决: 1. c盘路径下,找到这个.xml文件,用记事本打开 2. 直接拉到记事本最后,我圈起来这里的路径不能有中文,所以要去把…

C++面试宝典第24题:袋鼠过河

题目 一只袋鼠要从河这边跳到河对岸,河很宽,但是河中间打了很多桩子。每隔一米就有一个桩子,每个桩子上都有一个弹簧,袋鼠跳到弹簧上就可以跳得更远。每个弹簧力量不同,用一个数字代表它的力量,如果弹簧力量为5,就代表袋鼠下一跳最多能够跳5米;如果为0,就会陷进去无法…

【GitHub项目推荐--人脸识别】【转载】

01 带有移动应用程序的人脸识别库 OpenFace 作为用于人脸识别的通用库,能够实现瞬态和移动人脸识别,目前在 GitHub 上斩获 14291 Star。以下为 LFW 数据集 Sylvestor Stallone 输入单个图像的流程。 项目地址:https://github.com/cmusatya…

【zlm】针对单个设备的码率的设置

目录 代码修改 实验数据一 实验数据二 同时拉一路视频后 修改记录 使用方法 各库实操 代码修改 要被子类引用 ,所以放在protected 不能放private 下面的结论,可以在下面的实验数据里引用。“同时拉一路视频后” 实验数据一 https://10.60.3.45:1…

【ZYNQ入门】第十篇、基于FPGA的图像白平衡算法实现

目录 第一部分、关于白平衡的知识 1、MATLAB 自动白平衡算法的实现 1.1、matlab代码 1.2、测试效果 1.3 测试源图 2、为什么摄像头采集的图像要做白平衡 3、自动白平衡算法总结 4、FPGA设计思路 4.1、实时白平衡的实现 4.2、计算流程优化思路 第二部分、硬件实…

机器学习之numpy库

机器学习之numpy库 numpy库概述numpy库历史numpy的核心numpy基础ndarray数组内存中的ndarray对象ndarray数组对象的特点ndarray数组对象的创建ndarray对象属性的基本操作数组的维度元素的类型数组元素的个数数组元素索引(下标) ndarray对象数组的自定义类型切片操作一维数组切片…