css3设置背景图片的大小

2023-11-15

background-size
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。

语法:

1 background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */
2 background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */
3 background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */
4 background-size:cover;/* 将背景图片等比缩放填满整个容器 */
5 background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

参考:
https://www.cnblogs.com/imguo/p/5772668.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css3设置背景图片的大小 的相关文章

  • HTML5&CSS3笔记:CSS3过渡、变形和动画

    目前的情况是 如果页面上需要一些动画效果 要么你自己编写 JavaScript 要么使用 JavaScript 框架 如 jQuery 来提高效率 但是 虽然 CSS3 不可能在短期内取代 jQuery 或类似的框架 但它完全有能力做一些如
  • 【前端领域】3D旋转超美相册(HTML+CSS)

    世界上总有一半人不理解另一半人的快乐 爱玛 目录 一 前言 二 本期作品介绍 3D旋转相册 三 效果展示 四 详细介绍 五 编码实现 index html style css img 六 获取源码 公众号获取源码 获取源码 私信 关注 点赞
  • 最全面计算机英语单词列表(四)

    作为一名开发者 不管是自己写代码还是阅读英文文档 英语水平对于开发进度有很大的影响 业余时间简单整理了计算机开发中常见的英语单词 不限于前端开发 再此和朋友们分享 单词较多 为了阅读体验良好分成几个部分 下面是其他部分的链接 最全面计算机英
  • parent.layer.closeAll();关闭弹出层

    可参考文档 https wenku baidu com view e05a3fe15bf5f61fb7360b4c2e3f5727a5e92486 html 关闭所有页面 parent layer closeAll 先得到当前ifame层的
  • 7个步骤让PC网站自动适配手机网页

    传统的网站如何完成向移动设备的快速转型 通过移动适配技术可以实现 切图网是国内首家基于web技术服务的公司 而移动适配主要通过底层的web技术开发手段来完成 下面切图网将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃 1允
  • js三种获取数组的最后一个元素的方法

    一 pop 方法 pop 方法 删除数组最后一个元素 并返回该元素 所以利用这个方法可以取到数组的最后一个 同理shift 可以取到数组的第一个元素 shift 删除数组第一个元素 并返回该元素 let arr 1 2 3 let ele
  • wx.getUserProfile调用后没有反应?获取不到真正的用户头像和昵称

    考虑到近期开发者对小程序登录 用户信息相关接口调整的相关反馈 为优化开发者调整接口的体验 小程序登录 用户信息相关接口调整说明 公告中关于小程序回收 wx getUserInfo 接口可获取用户授权的个人信息能力的截止时间调整至2021年4
  • jquery如何获取表单全部数据

    Jquery 如何获取表单的全部数据 用于ajax提交 var formData var t Form serializeArray each t function formData this name this value console
  • JS面试——宏任务与微任务

    JavaScript的宏任务与微任务 1 问题的由来 2 JavaScript的宏任务与微任务 2 1promise的使用方法 2 2async与await的使用方法 3 面试题实战分析 程序执行顺序 参考文献 1 问题的由来 我相信 你也
  • Web 前端常用正则校验规则

    Web 前端常用正则校验规则 作为 Web 前端开发 常用的正则校验规则有很多 下面是一些常见的示例 1 校验手机号码 手机号码的正则表达式可以根据不同国家和地区的手机号码格式进行调整 以下是中国大陆的手机号码正则表达式 const reg
  • React系列之useState

    目录 1 基础使用 2 状态的读取和修改 3 组件的更新过程 4 使用规则 1 基础使用 作用 useState为函数组件提供状态 state 使用步骤 导入 useState 函数 调用 useState 函数 并传入状态的初始值 从us
  • css圆角容器改变背景色时圆角失效

    圆角的容器 改变背景色时 新背景色却并不是圆角 而是填充的直角 解决办法 给容器加样式 overflow hidden
  • 全网最全HTML基础

    目录 1 HTML结构 2 HTML 文件基本结构 3 HTML常见标签 3 1注释标签 3 2标题标签 h1 h6 3 3 段落标签 p 3 4 换行标签 br 3 5格式化标签 3 6图片标签 img 3 8表格标签 3 9 合并单元格
  • uni-app开发微信小程序的简要流程

    uni app开发微信小程序 开发uni app的技术条件就是微信小程序及Vue 不熟悉vue的同学要先学习了解一下 不熟悉小程序可以直接看uni文档 https uniapp dcloud io frame 其他博客 vue elemen
  • Vue3父子组件通信,父子传参

    Vue3父子组件通信 父子传参 前言 Vue2的小伙伴应该该经历过转战Vue3过程的中的抓狂 好多地方使用都不太一样 这期就给大家讲一下近期我也在用vue3开发中遇到到的问题父子组件通信 父传子 在父组件中引入son vue子组件 为子组件
  • 资深架构师分享:10个 Javascript 小技巧帮你提升代码质量

    主要介绍以下几点 提炼函数 合并重复的条件片段 把条件分支语句提炼成函数 合理使用循环 提前让函数退出代替嵌套条件分支 传递对象参数代替过长的参数列表 少用三目运算符 合理使用链式调用 分解大型类 本文会不断更新 不足之处欢迎评论区补充 1
  • Vue框架--Ruoyi解析(前端)

    路由router注册 router目录下的 index js 配合 permission js 是整套vue前端项目的权限判断核心 index js 里面的path 配置都是一些不会与权限挂钩的路由 例如 404 登录页面路径等 permi
  • 浏览器播放rtsp视频流:3、rtsp转webrtc播放

    浏览器播放rtsp视频流 3 rtsp转webrtc播放 文章目录 浏览器播放rtsp视频流 3 rtsp转webrtc播放 1 前言 2 rtsp转webRTC 3 初步测试结果 4 结合我们之前的onvif gSoap cgo的方案做修
  • Volta简单介绍

    Volta是一款强大的JavaScript工具管理器 它简化了命令行工具的安装和管理 通过Volta 开发者可以轻松地在多个项目中切换和配置Node js npm以及其它JavaScript工具版本 提高开发效率和环境一致性 什么是 Vol
  • Volta简单介绍

    Volta是一款强大的JavaScript工具管理器 它简化了命令行工具的安装和管理 通过Volta 开发者可以轻松地在多个项目中切换和配置Node js npm以及其它JavaScript工具版本 提高开发效率和环境一致性 什么是 Vol

随机推荐

  • 推荐这款神器!每年都有数以百万的大学生想用它!闲鱼都卖两百!

    文末有下载链接 如同明日将死那样生活 如同永远不死那样求知 甘地 image 这是一个能把破解者气死的软件 辛辛苦苦破解的软件 却被别人拿去收费标价200元 真买了 吃亏的是你 在我这 不用钱 说到论文翻译 真的是让人抓狂 每年百万的大学生
  • 【stm32】wifi ESP8266的透传 实验二(HAL库开发)

    一 总算完成了透传 感觉没几行代码 就是在昨天的基础上 对ESP8266的AT指令进行了封装 什么选择工作模式 STA 还是 AP 查询附近WIFI热点 连接WIFi 见解服务器的IP和端口 开启透传 我的代码的缺点 1 有点简单粗暴 逻辑
  • 教你使用gitee+PicGo+typora搭建免费的Markdown图床

    文章目录 创建gitee仓库 设置私人令牌 下载PicGo typora设置 测试时出错可能原因 注意 gitee添加了防盗链 屏蔽外链访问 注意 gitee添加了防盗链 屏蔽外链访问 注意 gitee添加了防盗链 屏蔽外链访问 现使用阿里
  • [西湖论剑2021中国杭州网络安全技能大赛]Yusa的秘密 writeup

    西湖论剑2021 Yusa的秘密 Sakura组织即将进攻地球 此时你意外得到了该组织内某个成员的电脑文件 你能从中发现本次阴谋所用的关键道具吗 注 题目中包含了五个彩蛋 且彩蛋对解题本身没有任何影响 快去发现吧 附件 Who am I z
  • 【数据结构】图文详解11道力扣链表OJ题

    需要云服务器等云产品来学习Linux的同学可以移步 gt 腾讯云 lt gt 阿里云 lt gt 华为云 lt 官网 轻量型云服务器低至112元 年 新用户首次下单享超低折扣 一 移除链表元素 二 反转链表 三 链表的中间节点 四 链表中倒
  • 【H5】 实现调用相机拍照功能

    H5 实现调用相机拍照功能 效果图如下 实现代码如下
  • Qt中线程的使用1

    初学Qt线程 此实例只是对Qt单一线程的使用 另外结合信号槽实现ui界面与子线程之间数据的传输 可以解决线程在运行的过程中 关闭对话框程序崩溃的问题 此实例要实现的效果图如下 界面控件的类 对象表如下 界面启动后 起初停止线程按钮是置灰的
  • Web的基本漏洞--代码执行漏洞RCE

    目录 一 代码执行漏洞的介绍 1 代码执行漏洞的原理 2 常用含有的代码执行漏洞的函数 3 代码执行漏洞的危害 4 代码执行漏洞的防范措施 一 代码执行漏洞的介绍 1 代码执行漏洞的原理 web应用程序是指程序员在代码中使用了一些执行函数例
  • Nilpotent

    In mathematics an element displaystyle x x of a ring displaystyle R R is called nilpotent if there exists some positive
  • 使用java进行补零操作

    很多情况下都会用到补零操作 譬如说工号01 0003什么的 以下代码用for循环和while循环实现简单的补零操作 在数字之前补零 可以补一个零 也可以补多个零 public class AddZero public static void
  • BaseMultiItemQuickAdapter实现多布局拖拽排序

    前言 BaseMultiItemQuickAdapter默认是支持但单布局拖拽功能的 如BaseItemDraggableAdapter 但是无法满足多布局拖拽需求 需要加以改造 1 梳理继承关系及构造 通过下图 可以发现BaseMulti
  • ArcObjects中的GraphicsLayer---------元素的容器

    图形元素 Graphic Element 是存储于GraphicsLayer中的 本文主要涉及的接口和类主要有以下几种 IGraphicsContainer IGraphicsLayer ICompositeGraphicsLayer Gr
  • SSM框架的科普有毒蘑菇网站系统源码+数据库+完整安装视频

    项目名称 SSM框架的科普有毒蘑菇网站系统源码 视频效果 SSM框架的科普有毒蘑菇网站系统源码 系统说明 用户测试账号 test 123456 管理员测试账号 admin 123456 数据库每个表都有详细注释 代码也有详细注释 详细说明
  • HTML基本语法格式(元素、标签)

    HTML的语法格式 阅读提醒 由于博客显示问体所以元素的 lt gt 开始和 gt 被省略了 HTML的主体格式 第一部分 和是网页文件的最外层标签 HTML中所有的内容都要在这里面 第二部分 和标签之间文本是头信息 放在元素的最上面使用
  • 关于Unity中Mecanim动画的动画状态代码控制与代码生成动画控制器

    对于多量的 复杂的 有规律的控制器使用代码生成 动画状态代码控制 1 每个动画状态 比如进入状态 离开状态 等都有可能需要代码来参与和处理 比如 进入这个动画单元后做哪些事情 来开这个动画单元后做哪些事情 为了解决这个问题 unity允许每
  • [ C++ ] — 内联函数

    1 什么是内联函数 其定义位于类声明中的函数都将自动成为内联函数 也可以使用inline限定符 在类声明之外定义成员函数 使之成为内联函数 2 内联函数的作用 引入内联函数的目的是为了解决程序中函数调用的效率问题 程序在编译器编译的时候 编
  • vue使用CSS插件scss时代码报红

    vue使用CSS插件scss时代码报红 问题描述 解决方案 1 打开设置 2 进入setting json文件修改 3 修改setting json文件 解决结果 问题描述 刚开始下载别人的代码 安装依赖运行起来后 样式引用没有问题 发现样
  • 华为OD机试 Python 最佳对手

    题目 在一个游戏中 队伍之间的对战要基于双方的实力来匹配 为了保证游戏体验 我们希望两支队伍的实力差别不超过一个上限值 现在 你将获得若干队伍的实力值 你的任务是进行队伍匹配 要求实力差最小且不超过上限 然后计算这些成功匹配的队伍间的实力差
  • 转:脱字符"^"的由来

    从事IT业二十多年 今年才知道 这个符号叫脱字符 由于最近在学Python的re正则表达式处理 就查了下这个名称的由来 转发如下 脱字符 就是说 在文章中 某个字 打漏了 打脱了 打落了 要在这个中间 把打落了 的字 插入进去 就是使用的这
  • css3设置背景图片的大小

    background size 设置背景图片的大小 以长度值或百分比显示 还可以通过cover和contain来对图片进行伸缩 语法 1 background size auto 默认值 不改变背景图片的高度和宽度 2 background