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

news2024/11/16 13:44:48

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/1408368.html

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

相关文章

将AWS iot消息数据发送Kinesis Firehose Stream存向S3

观看此文章之前,请先学习AWS iot的数据收集: 使用Linux SDK客户端向AWS Iot发送数据-CSDN博客 1、工作原理: 1.1 规则 规则可让您的设备与 AWS 服务进行交互。分析规则并根据物品发送的消息执行操作。您可以使用规则来支持任务&#xff0…

Lucene 源码分析——BKD-Tree

Lucene 源码分析——BKD-Tree - AIQ Bkd-Tree Bkd-Tree作为一种基于K-D-B-tree的索引结构,用来对多维度的点数据(multi-dimensional point data)集进行索引。Bkd-Tree跟K-D-B-tree的理论部分在本篇文章中不详细介绍,对应的两篇论文在附件中&#xff0c…

配置ntp时间服务器和ssh免密登录实验

1:配置ntp时间服务器,确保客户端主机能和服务主机同步时间 第一步,将服务器的时间同步对象改为阿里的时间服务器(这样比较精准) 先启动服务:[rootserver ~]# systemctl start chronyd 进入配置文件&#xf…

源 “MySQL 5.7 Community Server“ 的 GPG 密钥已安装,但是不适用于此软件包。请检查源的公钥 URL 是否配置正确

Is this ok [y/d/N]: y Downloading packages: 警告:/var/cache/yum/x86_64/7/mysql57-community/packages/mysql-community-server-5.7.44-1.el7.x86_64.rpm: 头V4 RSA/SHA256 Signature, 密钥 ID 3a79bd29: NOKEY 从 file:///etc/pki/rpm-gpg/RPM-GPG-KEY-mysql 检…

知识图谱符号表示比较:特性图、RDF和OWL

目录 前言1 特性图:灵活的图结构表示1.1 优势与灵活性1.2 存储优化与查询优势1.3 挑战:缺乏工业标准支持 2 RDF(Resource Description Framework):面向Web的数据标准2.1 三元组结构的优势2.2 语义标准与词汇丰富性2.3 …

蓝桥杯备战——1.点亮LED灯

1.解析原理图 由上图可以看到8个共阳LED灯接到了573输出口,而573输入接到单片机P0口上。当573 LE脚输入高电平时,输出随输入变化,当LE为低电平时,输出锁存。 由上图可以看到Y4C接到了或非门74HC02的输出端,而输入端为…

顺序表的增、删、改、查

小伙伴们好,学完C语言,就要开始学数据结构了,数据结构也是非常重要的,今天我们主要来学习在数据结构中最常用的增删改查操作。话不多说,一起来学习吧 1.数据结构相关概念 1.什么是数据结构? 数据结构是由…

【Web前端开发基础】CSS3之Web字体、字体图标、平面转换、渐变

CSS3之Web字体、字体图标、平面转换、渐变 目录 CSS3之Web字体、字体图标、平面转换、渐变一、Web字体1.1 Web字体概述1.2 字体文件1.3 font-face 规则 二、字体图标2.1 字体图标2.2 字体图标的优点2.3 图标库2.4 下载字体包2.5 字体图标的使用步骤2.6 字体图标使用注意点2.7 上…

12.常用统计分析方法——聚类分析

目录 基础知识 实操 层次聚类 划分聚类 方法一:K均值聚类(最常见) 方法二:基于中心点的划分(PAM) 避免不存在的类 基础知识 概念: 聚类分析是一种数据归约技术,旨在揭露一个…

prometheus监控RabbitMQ策略

一般用官方的rabbitmq_exporter采取数据即可,然后在普米配置。但如果rabbitmq节点的队列数超过了5000,往往rabbitmq_exporter就会瘫痪,因为rabbitmq_exporter采集的信息太多,尤其是那些队列的细节,所以队列多了&#x…

vue3-深入组件-组件注册和props更多细节

组件注册 定义好的组件需要注册才能被使用。 注册方式有两种 全局注册 局部注册 全局注册 .component() 方法,让组件在当前 Vue 应用中全局可用。 在 main.ts 中 import ./assets/main.cssimport { createApp } from vue import { createPinia } from pinia i…

无人机航迹规划(五):七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划(提供MATLAB代码)

一、七种算法(DBO、LO、SWO、COA、LSO、KOA、GRO)简介 1、蜣螂优化算法DBO 蜣螂优化算法(Dung beetle optimizer,DBO)由Jiankai Xue和Bo Shen于2022年提出,该算法主要受蜣螂的滚球、跳舞、觅食、偷窃和繁…

10. UE5 RPG使用GameEffect创建血瓶修改角色属性

前面我们通过代码实现了UI显示角色的血量和蓝量,并实现了初始化和在数值变动时实时更新。为了测试方便,没有使用GameEffect去修改角色的属性,而是通过代码直接修改的数值。 对于GameEffect的基础,这里不再讲解,如果需要…

微机原理常考填空以及注意事项第(三)弹~

前面已经总结了200个常考题注意事项,可以翻阅查看。 以下仅个人总结的易错以及注意事项: 1,汇编语言源程序的基本格式: DATA SEGMENT;存放数据项的数据段 DATA ENDS EXTRA SEGMENT;存放数据项的附加段 EXTRA ENDS STACK1 SEGM…

Mybatis四大组件

一、Mybatis四大组件 SqlSessionFactoryBuild、SqlSessionFactory、SqlSession、Mapper。 二、SqlSession四大对象 Executor、StatementHandler、ParameterHandler、ResultSetHandler。 这里阐述一下上图的流程 Exeutor发起sql执行任务 1、先调用statementHandler中的pre…

输入某年某月某日,判断这一天是这一年的第几天?(Java)

思路: 1,分别定义三个变量来接收 年 月 日 2,累加已经过完的月份的天数 日期 3,二月份的天数要根据是否是闰年,随之改变 1 3 5 7 8 10 12 ---> 31天 4 6 9 11 ---> 30天 2 ---> 闰…

【bioinfo】收藏生信常用网址

文章目录 文件格式文档SAM/VCF工具手册bwa/samtools基因组统计学wikisam flag值查询序列反向互补TransVar 变异注释UCSC-blat在线比对常用数据库 NCBI/nsembl/HGNC论坛 biostars/SEQanswers查询文献影响因子假设检验查询生信软件查询在线可视化工具Proksee 文件格式文档SAM/VCF…

阿里云国外服务器价格购买与使用策略

阿里云国外服务器优惠活动「全球云服务器精选特惠」,国外服务器租用价格24元一个月起,免备案适合搭建网站,部署独立站等业务场景,阿里云服务器网aliyunfuwuqi.com分享阿里云国外服务器优惠活动: 全球云服务器精选特惠…

为什么JDK1.7的HashMap会出现扩容死链

为什么JDK1.7的HashMap会出现扩容死链? JDK1.7版本的HashMap在多线程的情况下扩容出现死循环(扩容死链),根本原因是:HashMap在进行扩容时需要进行数据转移,jdk1.7的版本数据转移使用的是头插法&#xff08…

【每日一题】最大交换

文章目录 Tag题目来源解题思路方法一:暴力法方法二:贪心 写在最后 Tag 【暴力法】【贪心法】【数组】【2024-01-22】 题目来源 670. 最大交换 解题思路 本题的数据规模比较小,暴力法也可以通过。以下将会介绍暴力法和本题最优法。 方法一…