CSS3新增背景属性(四)

CSS3新增背景属性

1 background-origin

设置背景图原点起始位置:

  • padding-box:默认值从padding区域开始显示背景图像;
  • border-box:从border区域开始显示背景图像;
  • content-box:从content区域开始显示背景图像。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>background-origin</title><style>div {height: 400px;width: 400px;padding: 30px;border: 20px dashed red;background-color: darkkhaki;margin: 0 auto;/* 引入图片 */background-image: url("../../1、CSS选择器/imgs/fengjing.png");/* 图片是否重复 */background-repeat: no-repeat;/* 图片起始位置 */background-origin: content-box;}</style>
</head><body><div></div>
</body></html>
1 background-clip

裁剪背景图。

  • padding-box:从padding区域开始向外裁剪背景图像;
  • border-box:默认值,从border区域开始向外裁剪背景图像;
  • content-box:从content区域开始向外裁剪背景图像;
  • text:背景图只呈现在文字上,需要加上-webkit-,而且要将文字设置为透明色。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>background-clip</title><style>div {height: 400px;width: 400px;padding: 30px;border: 20px dashed red;background-color: black;margin: 0 auto;background-image: url("../images/bg.jpg");background-repeat: no-repeat;background-origin: padding-box;font-size: 100px;text-align: center;line-height: 400px;color: transparent;/* -webkit-background-clip: text; */background-clip: content-box;}</style></style>
</head><body><div>文字</div>
</body></html>
3 background-size

设置背景图尺寸。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>background-size</title><style>div {height: 400px;width: 400px;border: 1px solid black;background-image: url("../images/bg.jpg");background-repeat: no-repeat;/* 用长度指定背景图片大小 *//* background-size: 400px 400px; *//* 用百分比指定图片大小  *//* background-size: 100% 100%; *//* 默认值,背景真实大小 *//* background-size: auto; *//* 等比缩放,使背景图片完全在容器内,可能导致一部分容器没有图片,以先满足的图片为准 *//* background-size: contain; *//* 等比缩放,使图片尽可能覆盖容器,有时图片可能显示不完整 */background-size: cover;}</style>
</head><body><div></div>
</body></html>
4 background复合属性
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>background-origin</title><style>div {height: 400px;width: 400px;padding: 30px;border: 20px dashed red;margin: 0 auto;/* background: color url repeat position / size orgin clip */background: rgb(146, 97, 97) url("../images/bg.jpg") 5px 5px / 100% 100% border-box content-box;}</style>
</head><body><div></div>
</body></html>
5 多背景图
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>多背景图</title><style>div {height: 400px;width: 400px;border: 1px solid black;background: url("../images/touxiang.png") no-repeat top left/ 20% 20%,url("../images/touxiang.png") no-repeat top right/ 20% 20%,url("../images/touxiang.png") no-repeat bottom left/ 20% 20%,url("../images/touxiang.png") no-repeat bottom right/ 20% 20%;}</style>
</head><body><div></div>
</body></html>

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

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

相关文章

C语言中的main函数:命令行参数的工作原理

在C语言中&#xff0c;main函数是程序的入口点。它不仅可以接受返回值&#xff0c;还能处理命令行参数&#xff0c;允许用户在运行程序时传递数据。命令行参数是用户在启动程序时通过命令行界面提供的输入。C语言允许通过main函数的参数来访问这些输入。   int main(int argc…

我在命令行下学日语

同一个动作重复 300 遍&#xff0c;肌肉就会有记忆&#xff0c;重复 600 遍&#xff0c;脊柱就会有记忆&#xff0c;学完五十音图不熟练&#xff0c;经常遗忘或者要好几秒才想得起来一个怎么办&#xff1f;没关系&#xff0c;我做了个命令行下的小游戏 KanaQuiz 来帮助你记忆&a…

c++:vector

一、vector是什么&#xff1f; 1.1 vector的介绍 vector是表示可变大小数组的序列容器。 就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是…

一键切换暗黑模式,这些代码片段你不可错过

文章目录 前言正文1.多主题切换2.使用 SASS 实现轻松深色模式3.动画切换浅色与深色模式4.纯 CSS 主题切换5.GitHub 风格的深色模式切换6.持久深色模式7.基本 Vue 响应式切换8.创意灯泡切换 总结 前言 如今&#xff0c;许多网站设计师都会为用户提供浅色和深色模式的选择。这不…

理解为什么要有C++设计模式

什么时设计模式&#xff1f; 每一个模式描述了一个在我们周围不断重复的问题以及该问题的解决方案的核心&#xff0c;这样&#xff0c;就能一次有一次地使用该方案&#xff0c;而不必做重复劳动。 如何解决复杂性&#xff1f; 分解&#xff1a;人们面对复杂性有一个常见的做法…

HJ33 整数与IP地址间的转换

HJ33 整数与IP地址间的转换 整数与IP地址间的转换 描述 原理&#xff1a;ip地址的每段可以看成是一个0-255的整数&#xff0c;把每段拆分成一个二进制形式组合起来&#xff0c;然后把这个二进制数转变成 一个长整数。 举例&#xff1a;一个ip地址为10.0.3.193 每段数字 …

雷军救WPS“三次”,WPS注入新生力量,不再“抄袭”微软

救WPS“三次” 1989年&#xff0c;求伯君用128万行代码编写出了WPS1.0&#xff0c;宣告了中国自主办公时代的开启。 那时候&#xff0c;雷军还在武汉大学深造&#xff0c;他早就把求伯君当成了自己的榜样&#xff0c;这一来二去的&#xff0c;雷军和WPS之间也就结下了不解之缘…

[MySQL#10] 索引底层(1) | Page | 页目录

目录 1. 初识索引 2. 认识磁盘 3. MySQL与磁盘交互基本单位 4. 索引的理解 1. 重谈Page 2. 为什么IO交互要用Page 3. 有主键的表插入数据时的排序 4. 单个Page与多个Page 4.1 单个Page 4.2 多个Page 目录 单Page目录 多Page目录 在看本文之前&#xff0c;可以回顾…

sklearn 实现随机森林分类器 - python 实现

python sklearn 实现随机森林分类器 from sklearn.ensemble import RandomForestClassifier from sklearn.datasets import load_iris # 加载数据集 irisload_iris() x,yiris.data,iris.target print("x y shape:",x.shape,y.shape) # 创建并训练模型 model Random…

Altium Designer使用技巧(二)

一、创建类 1、按DC键&#xff0c;打开对象类。 2、右键添加一个类。命名为PWR。 3、将所有的电源类&#xff0c;全部添加到新创建的类中&#xff0c;从非成员类中点选到成员类中。 4、右下角点panes ,点PCB。 5、然后在左边单击PWR&#xff0c;点连接&#xff0c;可显示或…

<十六>Ceph mon 运维

Ceph 集群有故障了&#xff0c;你执行的第一个运维命令是什么&#xff1f; 我猜测是ceph -s 。无论执行的第一个命令是什么&#xff0c;都肯定是先检查Mon。 在开始之前我们有必要介绍下Paxos协议&#xff0c;毕竟Mon就是靠它来实现数据唯一性。 一&#xff1a; Paxos 协议 1…

Python Flask 数据库开发

Python Flask 数据库开发 引言环境配置创建 Flask 应用&#xff0c;连接数据库定义路由定义模型创建表创建 API 数据库直接操作启动 Flask 应用app.py 示例运行 Flask访问应用 展望 引言 在现代 web 开发中&#xff0c;Python 的 Flask 框架因其轻量和灵活性受到广泛欢迎。结合…

NPOI 操作详解(操作Excel)

目录 1. 安装 NPOI 2. 使用 NPOI 创建新 Excel 文件 3. 设置列宽和行高 1. 设置列宽 2. 设置行高 3. 同时设置列宽和行高 4. 设置统一的行高 5. 设置统一的列宽 6. 应用统一的行高和列宽 4. 合并单元格 5. 设置单元格样式&#xff08;字体、边框、背景色等&#xf…

TCP/IP网络编程:理解网络编程和套接字

TCP/IP网络编程&#xff1a;理解网络编程和套接字 网络编程又叫做套接字编程&#xff0c;是因为在网络编程中依赖使用套接字(socket),网络编程一般是C/S架构&#xff0c;即客户端/服务器模式&#xff0c;在服务器端依赖套接字绑定自身接口&#xff0c;并开启监听客户端连接&am…

Spring中lazy-init属性

Spring中lazy-init属性 1. 在 Spring 框架中的 lazy-init 属性 在 Spring 框架中&#xff0c;lazy-init 属性主要用于控制 Spring 容器中 Bean 的初始化时机。 含义&#xff1a; 当一个 Bean 被定义在 Spring 的配置文件&#xff08;可以是 XML 配置或者基于注解的配置等效场景…

多处理机调度(李昂学长视频总结)25新增考点

多处理机定义&#xff1a;多处理机指的是某个计算机系统中有多个cpu&#xff0c;在多处理机调度中&#xff0c;多处理机一般指的是共享存储器处理机&#xff0c;其两个或更多的cpu全部共享一个公用的RAM。 根据系统中的处理机相同与否&#xff0c;可将多处理机系统分为如下两类…

开源目标检测和语义分割都有哪些方法

在开源社区中&#xff0c;目标检测和语义分割都有许多广泛使用的方法和框架&#xff0c;以下是一些主流的方法&#xff1a; 1. 目标检测方法 目标检测的主要任务是识别图像中的物体并给出其位置&#xff08;通常为边界框&#xff09;&#xff0c;以下是常用的开源方法&#x…

少儿编程培训市场突破500亿元:教育新蓝海的崛起与未来展望

近年来&#xff0c;随着科技的迅速发展和家长对教育方式的重视&#xff0c;少儿编程市场成为一片新的蓝海。据最新市场调研报告显示&#xff0c;2024年中国少儿编程培训市场规模已突破500亿元&#xff0c;预计未来五年将持续增长。这一趋势反映了少儿编程教育的迅速崛起&#x…

【大数据学习 | kafka】producer的参数与结构

1. producer的结构 producer&#xff1a;生产者 它由三个部分组成 interceptor&#xff1a;拦截器&#xff0c;能拦截到数据&#xff0c;处理完毕以后发送给下游&#xff0c;它和过滤器不同并不是丢弃数据&#xff0c;而是将数据处理完毕再次发送出去&#xff0c;这个默认是不…

【论文速读】Optimization-based Prompt Injection Attack to LLM-as-a-Judge

基于优化的提示词注入攻击 摘要引言问题描述LLM-as-a-judge威胁模型攻击者知道什么 JUDGEDECEIVER 细节概述生成影子候选回复公式化为优化问题Target-aligned generation lossTarget-enhancement lossAdversarial perplexity loss优化问题 求解优化问题 摘要 LLM-as-a-Judge 利…