设置背景图片大小的方法

news2025/7/5 4:29:53

背景图片大小设置

  • 语法:background-size:宽度 高度;
  • 作用:设置背景图片大小
  • 取值:
取值场景
数字+px简单方便,常用
百分比相当于当前盒子自身的宽高百分比
contain包含,将背景图片等比例缩放,直到不会超出盒子的最大
cover覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白
  • 1.设置一个盒子赋予宽(400px)高(300px),并设置边框便于观察,将原图插入盒子中
    在这里插入图片描述

  • 2.第一种取值(数字+px):

    • 使用数字+px 给图片设置和盒子一样的宽高
    • background-size: 400px 300px;
      在这里插入图片描述
  • 3.第二种取值(百分比):

    • 使用百分比给图片设置宽高都为90%
    • background-size: 90% 90%;
      在这里插入图片描述
  • 4.第三种取值(contain):

    • 使用 contain 将背景图片等比例缩放,直到不会超出盒子的最大
    • background-size: contain;
      在这里插入图片描述
  • 5.第四种取值(cover):

    • 使用 cover 将背景图片等比例缩放,直到刚好填满整个盒子没有空白
    • background-size: cover;
      在这里插入图片描述

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

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

相关文章

Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图)

Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图) 一、简单介绍 二、环境搭建 三、使用 echarts 四、自动缩放 echarts 五、数据更…

【网络通信】websocket如何断线重连

Vue <template><div><button click"sendDevName(xxxxxxxx)">发送</button>{{data}}</div> </template><script> export default {name: HelloWorld,data () {return {data: null}},// html加载完成后执行initWebSocket()…

Vue3-路由跳转专题详细总结

一、基本路由 点击事件似乎可以使用模板更改视图中的内容&#xff0c;个人认为与路由的区别是路由能使网页中的地址栏发生变化 请先阅读基础第二篇 1.创建一个组件,并引入 2.js文件中配置路径 //name相当于别名{path:/tabView,component:TabView},{name:myComPany,path:compan…

Vue3项目搭建全过程

目录 一、前言 二、搭建准备 三、搭建项目 四、启动项目 一、前言 在2020年的9月19日&#xff0c;万众期待的Vue3终于发布了正式版&#xff0c;命名为“One Piece”。 它也带来了很多新的特性&#xff1a;更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设…

前端面试真题宝典(一)

面试题真题 闭包和柯里化 闭包是什么&#xff1f;闭包是能够读取其他函数内部变量的函数 柯里化是什么&#xff1f;柯里化是把一个多个参数的函数转化为单参数函数的方法 闭包的用途&#xff1a;闭包的主要用途是为了不污染全局变量&#xff0c;用闭包的局部变量来做一些库…

30个题型+代码(冲刺2023蓝桥杯)(中)

2023.3.13~4.13持续更新 目录 &#x1f34e;注意 &#x1f33c;前言 &#x1f33c;十&#xff0c;KMP&#xff08;留坑&#xff09; &#x1f33c;十一&#xff0c;Trie&#xff08;留坑&#xff09; &#x1f33c;十二&#xff0c;BFS &#x1f44a;(一)1562. 微博转发…

获取街道、镇级的地图geoJson数据方法,使用echarts绘制出街道、镇级的地图区域画面(中山市为例)

一、需求 1、在echarts上绘制市级以下的区、县的区域地图。 2、在市级下很多都是有区、县的区域&#xff0c;而少部分是不存在区、县的&#xff0c;是直接市下面一级就是街道、镇级别的区域。 3、统一管理区域数据&#xff0c;有区县的市直接拿区县的geoJson数据&#xff0c;没…

炸弹人小游戏代码开源(python)

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a;小刘主页 ♥️每天分享云计算网络运维课堂笔记&#xff0c;努力不一定有收获&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️夕阳下&#xff0c;是最美的绽放&#xff0…

Ajax--》请求操作以及跨域相关讲解

目录 jQuery中的Ajax 请求超时与网络异常处理 取消请求 Ajax请求—fetch() 跨域 jQuery中的Ajax 在jQuery中应该如何发送Ajax请求呢&#xff1f;看到这篇文章你就能大概了解到如何在jQuery中发送Ajax。 要想使用jQuery框架&#xff0c;肯定是需要引进jQuery资源的&#…

CSS实现单行、多行文本溢出显示省略号(…)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录一、单行超出显示省略号二、多行超出显示省略号一、单行超出显示省略号 描述&#xff1a;如果文字超出父元素指定宽度&#xff0c;文字会自动换行&#xff0c;而连续…

Node.js——文件模块和路径模块(读写文件,处理路径)

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿 offer&#xff08;秋招&#xff09; &#x1f947;推荐学习&…

MySQL - 死锁的产生及解决方案

MySQL - 死锁的产生及解决方案1. 死锁与产生死锁的四个必要条件1.1 什么是死锁1.2 死锁产生的4个必要条件2. 死锁案例2.1 表锁死锁2.2 行锁死锁2.3 共享锁转换为排他锁3. 死锁排查4. 实例分析4.1 案例描述4.2 案例死锁问题复现4.3 死锁排查4.4 解决死锁5. 如何避免死锁1. 死锁与…

【保姆级】JMeter Mqtt 压测配置

忽然有个紧急任务要对某个服务做MQTT做压测&#xff0c;紧急实操下JMeter&#xff0c;这里记录下非专业测试员的测试过程、(▽&#xff40;)&#xff0c;欢迎&#x1f44f;大家检查指点(&#xffe3;∇&#xffe3;)/下载⏬工具JMeter官方下载地址https://jmeter.apache.org/do…

【前端】1.学习了一段时间的vue,总结一下Vue书写规范

学习了一段时间的vue&#xff0c;总结一下Vue书写规范命名规范普通变量命名规范常量命名规范组件命名规范method 方法命名命名规范views 下的文件命名props 命名规范结构化规范命名规范 在团体开发项目中&#xff0c;为了团队所有成员书写可维护的代码&#xff0c;而不是一次性…

JS入门到精通完整版

前言 JavaScript&#xff08;简称“JS”&#xff09; 是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名&#xff0c;JavaScript 基于原型编程、多范式的动态脚本语言&#xff0c;并且支持面向对象、命令式、声明式、…

【前端灵魂脚本语言JavaScript①】——JS引入方式

&#x1f41a; 作者: 阿伟 &#x1f482; 个人主页: Flyme awei &#x1f40b; 希望大家多多支持&#x1f618;一起进步呀&#xff01; &#x1f4ac; 文章对你有帮助&#x1f449;关注✨点赞&#x1f44d;收藏&#x1f4c2; JavaScript引入 文章目录JavaScript引入一、JS介绍二…

PTA第六章作业详解

&#x1f680;write in front&#x1f680; &#x1f4dd;个人主页&#xff1a;认真写博客的夏目浅石. &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd; &#x1f4e3;系列专栏&#xff1a;夏目的作业 &#x1f4ac;总结&#xff1a;希望你看完之后&am…

vue+uniapp瀑布流布局多种实现方式

文章目录前言一、实现原理二、代码实现1.方式1&#xff08;图片高度累加比较法&#xff09;2.方式2&#xff08;父元素高度比较法&#xff09;三.uniapp实现代码实现四、多列实现代码实现前言 瀑布流布局是网页设计常见的一种布局&#xff0c;一般用于图片多列展示。列宽固定&…

Vue3:状态管理-Store(Vuex,Pinia)

什么是状态管理 理论上来说&#xff0c;每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了 它是一个独立的单元&#xff0c;由以下几个部分组成 状态&#xff1a;驱动整个应用的数据源&#xff1b;视图&#xff1a;对状态的一种声明式映射&#xff1b;交互&#xff1a…

写给20、21级学生的话

写给20、21级学生的话前言一、关于招聘变招生&#xff0c;你怎么看&#xff1f;二、对于即将实习/已经实习的学生&#xff0c;你有什么建议&#xff1f;1.学习方面2.提升方面三、思想成年真的很重要前言 最近&#xff0c;有一些同学遇到的实习问题&#xff0c;我统一回复下&…