CSS新手入门笔记整理:CSS3背景样式

背景大小:background-size

语法

div{background-size:取值;}
div{background-size:100px 100px;}

background-size属性取值有两种:一种是长度值,如px、em、百分比等;另一种是使用关键字。

属性值

说明

cover

即“覆盖”,表示将背景图片等比缩放来填满整个元素

contain

即“容纳”,表示将背景图片等比缩放至某一边紧贴元素边沿为止


背景位置:background-origin

语法

div{background-origin:取值;}

属性值

说明

border-box

从边框开始平铺

padding-box

从内边距开始平铺(默认值)

content-box

从内容区开始平铺


背景剪切:background-clip

background-clip属性用于指定背景图片在元素盒子模型中的哪些区域被剪切。

语法

div{background-clip:取值;}

属性值

说明

border-box

从边框开始剪切(默认值)

padding-box

从内边距开始剪切

content-box

从内容区开始剪切


多背景图片

语法

div{background:url(img/frame1.png) bottom left no-repeat,url(img/frame2.png) top right no-repeat;}

background是一个复合属性,上面代码其实等价于:

div{background:url(img/frame1.png), url(img/frame2.png);background-position: bottom left, top right;background-repeat:no-repeat, no-repeat;
}

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

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

相关文章

Kubernetes 学习总结(40)—— Kubernetes 之 自动伸缩 HPA、VPA、CA和CPA详解

前言 Kubernetes 提供了多种自动伸缩机制,例如 HPA(Horizontal Pod Autoscaling),可以根据不同情况动态调整 Pod 副本数量。此功能使 Pod 能够有效地处理当前流量,而无需管理员不断干预来调整副本数量。除了 HPA 之外…

哪些行业装配柔性线路板 (FPC)时用到UV胶水?

柔性线路板(FPC)因其可弯曲和轻薄的特性,在多种行业和应用中都有广泛的应用。以下是一些常见的行业和场景,它们在装配FPC时可能使用UV胶水: 1.电子产品制造: 移动设备:如智能手机、平板电脑和可…

解决Ubantu 18.04 输入正确密码后进不去桌面

今天在学习中遇到了一个问题,在Ubuntu中输入登录密码后进不去桌面,一直返回登录页面,是因为配置环境变量/etc/profile出现了问题,远程连接上ubantu或者使用ctrlaltF(1~6)输入用户名和密码(注意密…

QT中网络编程之发送Http协议的Get和Post请求

文章目录 HTTP协议GET请求POST请求QT中对HTTP协议的处理1.QNetworkAccessManager2.QNetworkRequest3.QNetworkReply QT实现GET请求和POST请求Get请求步骤Post请求步骤 测试结果 使用QT的开发产品最终作为一个客户端来使用,很大的一个功能就是要和后端服务器进行交互…

一键自动化脚本使用acme.sh部署RSA、ECC双证书,实现自动续期+钉钉告警

一键自动化脚本使用acme.sh部署RSA、ECC双证书,实现自动续期+钉钉告警。 ECC证书 相比 RSA证书, 密钥短了很少,但安全性还是有保证,ECC 是Elliptic curve cryptography的简写, 是一种建立公开密钥加密的算法,基于椭圆曲线。由于其密钥较短,运算速度较快,所以渐渐开始在…

【经典LeetCode算法题目专栏分类】【第7期】快慢指针与链表

《博主简介》 小伙伴们好,我是阿旭。专注于人工智能AI、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 快慢指针 移动零 class…

命令执行 [SWPUCTF 2021 新生赛]babyrce

打开题目 我们看到题目说cookie值admin等于1时,才能包含文件 bp修改一下得到 访问rasalghul.php,得到 题目说如果我们get传入一个url且不为空值,就将我们get姿势传入的url的值赋值给ip 然后用正则过滤了 / /,如果ip的值没有 / …

PLC智能网关,实现PLC联网

在工业自动化领域,PLC(可编程逻辑控制器)的应用日益广泛。然而,传统的PLC系统通常面临着联网难题,限制了数据的共享和远程监控的可能性。在这个背景下,PLC智能网关应运而生。本文将围绕“PLC智能网关&#…

Java第一个程序——Hello,World!

“Hello, world”的由来可以追溯到 The C Programming Language 。在这门编程语言中,它被用作第一个演示程序,向人们展示了在计算机屏幕上输出“Hello world”这行字符串的计算机程序。由于这个演示程序的简洁性和直观性,它成为了许多初学者学…

TikTok文化独白:短视频如何塑造社会心态?

在数字时代的浪潮中,社交媒体平台已然成为影响社会心态的重要力量,而TikTok以其独特的短视频形式,成为年轻一代传达思想和情感的重要场所。本文将深入探讨TikTok文化的独白,研究短视频是如何在这个充满活力的平台上塑造和反映社会…

谷歌Gemini与GPT-3.5 Turbo的实力比较;半小时写了一个简单的1945游戏

🦉 AI新闻 🚀 谷歌Gemini与GPT-3.5 Turbo的实力比较 摘要:卡耐基梅隆大学进行了专业客观的第三方比较,发现Gemini Pro版本接近但略逊于GPT-3.5 Turbo,GPT-4则领先。Gemini在不同任务中表现出一些奇怪的特性&#xff…

String 的转换 ,你平时有关注过么?

大家平时需要将一个值转换成字符串类型 String时是如果操作的? 随缘? 还是看心情? toString (String) String.valueOf() 这三个玩意的区别是啥? toString ,是某个对象的函数 所以有3个点要…

AcWing算法提高课-2.2.2武士风度的牛

算法提高课整理 CSDN个人主页:更好的阅读体验 原题链接 题目描述 农民 John 有很多牛,他想交易其中一头被 Don 称为 The Knight 的牛。 这头牛有一个独一无二的超能力,在农场里像 Knight 一样地跳(就是我们熟悉的象棋中马的走…

智能优化算法应用:基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蜜獾算法4.实验参数设定5.算法结果6.参考文献7.MA…

高效单节锂电池3V-4.2V升压12V1A解决方案

高效单节锂电池3V-4.2V升压12V1A解决方案 随着便携式产品的发展,对电源管理的要求越来越高。如何将单节锂电池的3V-4.2V电压升高至12V,成为了一种常见的需求。针对这一需求,本文将介绍一款高效、可靠的升压解决方案。 产品特性: …

鸿鹄工程项目管理系统源码:Spring Cloud与前后端分离的完美结合

在现代化的工程项目管理中,一套功能全面、操作便捷的系统至关重要。本文将介绍一个基于Spring Cloud和Spring Boot技术的Java版工程项目管理系统,结合Vue和ElementUI实现前后端分离。该系统涵盖了项目管理、合同管理、预警管理、竣工管理、质量管理等多个…

基于 Flink 的典型 ETL 场景实现方案

目录 1.实时数仓的相关概述 1.1 实时数仓产生背景 1.2 实时数仓架构 1.3 传统数仓 vs 实时数仓 2.基于 Flink 实现典型的 ETL 场景 2.1 维表 Join ■ 2.1.1 预加载维表 方案 1: 方案 2: ■ 2.1.2 热存储关联 ■ 2.1.3 广播维表 ■ 2.1.4 Tem…

如何控制mem/ip出pin在pin的正中间

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 无论是ICC2还是innovus都不提供这样的功能,如果有这样的要求就需要通过脚本实现,这里提供一个参考脚本。 proc cb {boundary width spacing exten} {set y [expr ([linde x $boundary 1 1] - [l…

vitepress项目使用github的action自动部署到github-pages中,理论上可以通用所有

使用github的action自动部署到github-pages中 创建部署的deploy.yml文件,在项目的根目录下面 .github\workflows\deploy.yml 完整的代码:使用的是pnpm进行依赖安装。 name: 部署VitePresson:push:branches:- docs # 这段是在推送到 docs 分支时触发该…

C# 使用NUnit进行单元测试

写在前面 NUnit是一个开源的.Net单元测试框架,经常被用来在.Net体系下做白盒测试。 NUnit.org GitHub 本文记录一个简单的使用NUnit进行单元测试的完整流程。 代码实现 新建一个目标类库NUnitTester,添加待测试的类文件,内容如下&#…