12.前端--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.mzph.cn/news/645154.shtml

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

相关文章

硬件基础:组合逻辑电路

什么是组合逻辑电路 组合逻辑电路是由一些基本的逻辑门电路组成的,没有反馈,输出仅取决于输入。 组合逻辑电路是数字逻辑电路中一种重要的电路类型,它是由多个逻辑门(例如与门、或门、非门等)组成的电路。组合逻辑电路…

APUE学习之信号(Signal)

目录 一、信号 1、基本概念 2、用户处理信号的方式 3、查看信号 4、可靠信号和不可靠信号 5、信号种类 6、终止进程信号的区别 二、进程对信号的处理 1、signal()函数 2、sigaction()函数 3、代码演示 4、运行结果…

k8s---HPA 命名空间资源限制

目录 HPA相关知识 HPA(Horizontal Pod Autoscaling)Pod 水平自动伸缩,Kubernetes 有一个 HPA 的资源,HPA 可以根据 CPU 利用率自动伸缩一个 Replication Controller、 Deployment 或者Replica Set 中的 Pod 数量。 (1…

WEB前端运算符以及数据类型转换流程控制详解

算术运算符 、-、*、/、%、**&#xff08;幂次运算&#xff09; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><script>// /除法运算与C不同两个整数之间相除可能会得到…

LTD261次升级 | 小程序支持抖音客服、支持抖音登录 • 短信发送需实名认证 • 表单提交成功收邮件提醒

1、 抖音小程序新增抖音IM客服功能&#xff1b; 2、 抖音小程序支持一键登录、支持快捷授权手机号 3、 表单新增发送邮件到提交者邮箱&#xff1b; 4、 表单支持配置不自动推送客户管理&#xff1b; 5、 短信发送需实名认证签署承诺书&#xff1b; 6、 其他已知问题修复与优化&…

安装 nvm

前言&#xff1a; nvm 即 node 版本管理工具 (node version manager)&#xff0c;好处是方便切换 node.js 版本。 通过将多个 node 版本安装在指定路径&#xff0c;然后通过 nvm 命令切换时&#xff0c;就会切换我们环境变量中 node 命令指定的实际执行的软件路径。 使用场景…

数据结构笔记1

来自《Python数据结构学习笔记》&#xff08;张清云 编著&#xff09; 第一章 数据结构基础 1.逻辑结构 集合&#xff1a;结构中的数据元素除了同属于一种类型外&#xff0c;别无其他关系线性结构&#xff1a;数据元素之间一对一的关系树形结构&#xff1a;数据元素之间一对…

给定三条边a\b\c,请你判断一下能不能组成一个三角形

题目&#xff1a;给定三条边a\b\c&#xff0c;请你判断一下能不能组成一个三角形 输入描述&#xff1a; 输入包含多组数据&#xff0c;每组数据包含三个正整数a、b、c&#xff08;1≤a, b, c≤10^100&#xff09; 输出描述&#xff1a; 对应每一组数据&#xff0c;如果它们…

Open CASCADE学习|数据类型定义

今天研究一下Standard_TypeDef.hxx文件&#xff0c;该文件的代码如下&#xff0c;首先检查是否存在一个名为"_Standard_TypeDef_HeaderFile"的头文件&#xff0c;如果不存在则创建该头文件。 然后&#xff0c;它包含了一些标准库头文件&#xff0c;例如cstddef、cti…

抖音向微信引流主要有哪几种方法-数灵通

近年来&#xff0c;随着智能设备的普及和信息技术的进步&#xff0c;短视频制作门槛逐渐降低&#xff0c;用户自创视频数量迅猛增长&#xff0c;用户规模持续扩大&#xff0c;有力推动了移动短视频的繁荣发展&#xff0c;市场规模也在不断扩张。作为当下炙手可热的短视频APP&am…

pycharm安装过程

1、安装包官网下载 PyCharm: the Python IDE for Professional Developers by JetBrains 点击下载 下拉选择社区版本 选择下载 下载完成后&#xff0c;双击exe安装。 安装完成&#xff0c;生成的桌面快捷方式 同意并继续 进入开发界面

centos宝塔远程服务器怎么链接?

要远程连接CentOS宝塔服务器&#xff0c;可以按照以下步骤操作&#xff1a; 打开终端或远程连接工具&#xff0c;比如PuTTY。输入服务器的IP地址和SSH端口号&#xff08;默认为22&#xff09;&#xff0c;点击连接。输入用户名和密码进行登录。 如果你已经安装了宝塔面板&…

网络安全学习 --- 小实验

题目 要求 1.防火墙线下使用子接口分别对应两个内部区域。 2.所有分区设备可以ping通网关。 过程 1.接口&#xff0c;区域配置完成。 2.配置SWL2 vlan 2 vlan 3 # interface GigabitEthernet0/0/1port link-type trunkport trunk allow-pass vlan 2 to 3 # interface Giga…

JavaWeb之JavaScript-Vue --黑马笔记

什么是JavaScript&#xff1f; JavaScript&#xff08;简称&#xff1a;JS&#xff09; 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的&#xff0c;它能使网页可交互。 JavaScript 和 Java 是完全不同的语言&#xff0c;不论是概念还是设计。但是基础语法类似。 …

c语言不定参数

时间记录&#xff1a;2024/1/22 一、不定参数的函数定义和使用到的c函数 &#xff08;1&#xff09;定义 void fun1(参数类型 argName,...); 示例&#xff1a; void fun1(int count,...);&#xff08;2&#xff09;获取不定参数的值 #include <stdarg.h> //包含头文件…

java数据结构与算法刷题-----LeetCode667. 优美的排列 II

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 解题思路 题目要求我们返回一个数组长度为n的数组&#xff0c;必须含有1~n…

信号处理--matlab绘制包络谱图

包络谱图是一种描述信号振动特征的频谱图&#xff0c;它可以显示出信号振动的主要频率成分和振幅变化情况。在机械系统故障诊断和健康监测等领域中&#xff0c;绘制包络谱图是一种常用的分析方法&#xff0c;其主要作用有以下几个方面&#xff1a; 检测故障特征频率&#xff1a…

AI 欺诈事件频出,如何重塑身份认证的安全性?

据报告表示&#xff0c;生成式人工智能每年可为世界经济注入相当于 4.4 万亿美元的资金。预计到 2030 年&#xff0c;人工智能对全球财政的潜在贡献将达到 15.7 万亿美元。人们惊叹于 AI 强大工作效率&#xff0c;期待能帮忙节省不必要的劳动力&#xff0c;但事实上 AI 出现之后…

C++类的简单学习

C语言结构体中只能定义变量&#xff0c;在C中&#xff0c;结构体内不仅可以定义变量&#xff0c;也可以定义函数 之前在数据结构学习中&#xff0c;我们用C语言方式实现的栈&#xff0c;结构体中只能定义变量&#xff1b;现在以C方式实现&#xff0c;会发现struct中也可以定义函…

题记(29)--魔咒词典

目录 一、题目内容 二、输入描述 三、输出描述 四、输入输出示例 五、完整C语言代码 一、题目内容 哈利波特在魔法学校的必修课之一就是学习魔咒。据说魔法世界有100000种不同的魔咒&#xff0c;哈利很难全部记住&#xff0c;但是为了对抗强敌&#xff0c;他必须在危急时刻…