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.mzph.cn/news/644029.shtml

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

相关文章

Leetcode—39.组合总和【中等】

2023每日刷题&#xff08;七十六&#xff09; Leetcode—39.组合总和 算法思想 实现代码 class Solution { public:vector<vector<int>> combinationSum(vector<int>& candidates, int target) {vector<vector<int>> ans;vector<int>…

Docker 魔法解密:探索 UnionFS 与 OverlayFS

本文主要介绍了 Docker 的另一个核心技术&#xff1a;Union File System。主要包括对 overlayfs 的演示&#xff0c;以及分析 docker 是如何借助 ufs 实现容器 rootfs 的。 1. 概述 Union File System Union File System &#xff0c;简称 UnionFS 是一种为 Linux FreeBSD NetB…

2024年美赛数学建模思路 - 案例:退火算法

文章目录 1 退火算法原理1.1 物理背景1.2 背后的数学模型 2 退火算法实现2.1 算法流程2.2算法实现 建模资料 ## 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 退火算法原理 1.1 物理背景 在热力学上&a…

Vue+OpenLayers7:html原生网页如何使用OpenLayers7地图

返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7 前言 尽管现在大部分网页都是使用Vue或者React开发了,但是还是有不少开发者使用的是网页原生html进行开发,或者是老项目维护的需要,所以为了照顾使用html原生网页的同学们,本章简单讲解一下如何使用原始html网页情况下…

关于网络协议的笔记

简介&#xff1a; 协议&#xff0c; 网络协议的简称&#xff0c;网络协议是通信计算机双方必须共同遵从的一组约定。如怎么样建立连 接、怎么样互相识别等。只有遵守这个约定&#xff0c;计算机之间才能相互通信交流。它的 三要素是&#xff1a;语 法、语义、时序。 为了使数…

外网ssh远程连接服务器

文章目录 外网ssh远程连接服务器一、前言二、配置流程1. 在服务器上安装[cpolar](https://www.cpolar.com/)客户端2. 查看版本号&#xff0c;有正常显示版本号即为安装成功3. token认证4. 简单穿透测试5. 向系统添加服务6. 启动cpolar服务7. 查看服务状态8. 登录后台&#xff0…

常用shell脚本命令总结

可以将shell脚本 当做终端命令的集合&#xff0c;终端可以运行shell就可以 shell 脚本 声明(第一行加) #!/bin/bash 设置变量 FILE_PATH_BASE/home/gitlab-runner/apk_download/ 使用变量 "$FILE_PATH_BASE" 1、mv命令 文件移动 mv ./build/web/ ${FILE_PATH_BASE} …

innodb底层原理和MySQL日志机制

server层 1. 连接器 客户端连接数据库需要输入账号、密码。连接器进行校验账号密码以及权限。 2. 查询缓存 连接器连接以后&#xff0c;比如输入一个select语句&#xff0c;这时候第一步就会先根据sql语句作为key给查询缓存中查看这条sql有没有已经被查询过&#xff0c;如果…

k8s图形化管理工具之rancher

前言 在前面的k8s基础学习中&#xff0c;我们学习了各种资源的搭配运用&#xff0c;以及命令行&#xff0c;声明式文件创建。这些都是为了k8s管理员体会k8s的框架&#xff0c;内容基础。在真正的生产环境中&#xff0c;大部分的公司还是会选用图形化管理工具来管理k8s集群&…

Mybatis 全局配置文件(三)

文章目录 第一章&#xff1a;概述第二章&#xff1a;properties (了解)第三章&#xff1a;settings第四章&#xff1a;typeAliases (别名处理器)第五章&#xff1a;typeHandlers (类型处理器)第六章&#xff1a;plugins(插件)第七章&#xff1a;environments (环境)第八章&…

顺序表和链表【数据结构】【基于C语言实现】【一站式速通】

目录 顺序表 顺序表的优点 顺序表的实现 1.结构体的定义 2.初始化数组 3.插入数据 4.其余接口函数的实现 5.释放内存 顺序表的缺陷 单向链表 单向链表的优点 单向链表的实现 1.链表的定义 2.链表的初始化 3.其余接口函数的实现 5.释放内存 单向链表的缺陷 双…

Docker(九)Docker Buildx

作者主页&#xff1a; 正函数的个人主页 文章收录专栏&#xff1a; Docker 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01; Docker Buildx Docker Buildx 是一个 docker CLI 插件&#xff0c;其扩展了 docker 命令&#xff0c;支持 [Moby BuildKit] 提供的功能。提…

day04-CSS进阶

01-复合选择器 定义&#xff1a;由两个或多个基础选择器&#xff0c;通过不同的方式组合而成。 作用&#xff1a;更准确、更高效的选择目标元素&#xff08;标签&#xff09;。 后代选择器 后代选择器&#xff1a;选中某元素的后代元素。 选择器写法&#xff1a;父选择器 …

Java设计模式-桥接模式(9)

馆长准备了很多学习资料,其中包含java方面,jvm调优,spring / spring boot /spring cloud ,微服务,分布式,前端,js书籍资料,视频资料,以及各类常用软件工具,破解工具 等资源。请关注“IT技术馆”公众号,进行关注,馆长会每天更新资源和更新技术文章等。请大家多多关注…

Java线程池七大参数详解和配置(面试重点!!!)

一、corePoolSize核心线程数 二、maximunPoolSize最大线程数 三、keepAliveTime空闲线程存活时间 四、unit空闲线程存活时间的单位 五、workQueue线程工作队列 1、ArrayBlockingQueue FIFO有界阻塞队列 2、LinkedBlockingQueue FIFO无限队列 3、PriorityBlockingQueue V…

竞赛保研 车道线检测(自动驾驶 机器视觉)

0 前言 无人驾驶技术是机器学习为主的一门前沿领域&#xff0c;在无人驾驶领域中机器学习的各种算法随处可见&#xff0c;今天学长给大家介绍无人驾驶技术中的车道线检测。 1 车道线检测 在无人驾驶领域每一个任务都是相当复杂&#xff0c;看上去无从下手。那么面对这样极其…

教学改进措施及方法

在教育的世界里&#xff0c;每一位教师都是一位探险家&#xff0c;探索着如何更好地点燃学生的求知欲望&#xff0c;帮助他们展翅飞翔。我&#xff0c;作为一位拥有多年教学经验的教师&#xff0c;也在这条路上不断摸索。今天&#xff0c;我想分享一些我在教学实践中的改进措施…

ai伪原创生成器app,一键生成原创文章

近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;AI伪原创生成器App已经成为了许多写手和创作者们的新宠。这款AI伪原创生成器App以其一键生成原创文章的快速便捷性&#xff0c;正在引起广泛的关注和使用。下面跟随小编一起来了解下吧&#xff01; 随着互联网的普及&…

Transformer and Pretrain Language Models3-5

Transformer结构&#xff08;优化Tricks&#xff09; Transformer在训练和生成过程中&#xff0c;采用了很多小技巧&#xff1a; 首先是训练过程&#xff0c;训练过程中采用了一种叫checkpoint average技术&#xff0c;以及ADAM的一个优化器来进行参数更新&#xff0c;另外的…

【QML-Qt Design Studio】

QML编程指南 ■ Qt Design Studio &#xff08;Qt Quick UI设计工具&#xff09;■ 安装Qt Design Studio■ ■ Qt Design Studio &#xff08;Qt Quick UI设计工具&#xff09; Qt Design Studio是一个用于创建酷炫、优美UI的工具。 简单概括其功能就是让UI设计转换为qml&…