web前端基础——背景图片

article/2025/10/31 4:32:26

作用：设置背景图片大小

语法：background-size: 宽度 高度

取值：

取值场景
数字+px简单方便，常用
百分比相对于当前盒子自身的宽高百分比
contain包含，将背景图片等比例缩放，直到不会超出盒子的最大范围
cover覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

原图效果
在这里插入图片描述

contain效果
在这里插入图片描述

如果图的宽或高与盒子的尺寸相同了，另一个方向会停止缩放，导致盒子可能会有留白

cover效果
在这里插入图片描述

保证图片的宽和高与盒子的尺寸完全相同，有可能导致图片显示不全


http://chatgpt.dhexx.cn/article/OTOmSRK5.shtml

相关文章

html+css+js实现的前端模板

html+css+js实现的前端模板

代码功能 实现一个为用户提供能够快速制作主流表情包的网站。提供丰富的模板和在线自定义图片功能。可以对图片添加文字、水印和图片等功能。丰富的动画效果搭配颜值的前端模板，可以用来学习学习。 话不多说，上图片 有需要的可以去下载。 https://do…
阅读更多...
前端案例：飞机大战( js+dom 操作，代码完整，附图片素材)

前端案例：飞机大战( js+dom 操作，代码完整，附图片素材)

目录 一、案例效果 二、实现思路 三、完整代码详细注释 四、涉及要点 五、案例素材 一、案例效果 二、实现思路 创建游戏背景板；创建我方战机，鼠标进入游戏面板后其随鼠标轨迹运动； onmousemove创建子弹，让子弹周期性的在战…
阅读更多...
博客前端模板

博客前端模板

文章目录 序言效果展示菜单栏实现内容布局底部代码 序言 一直后端开发写接口，时间久了，把前端知识忘得一干二净了。最近公司项目不是很忙，想写一个博客练练手。模仿别人博客用bootstrap写了一个博客模板记录下。 效果展示 首页大屏效果&am…
阅读更多...
前端设计类网站汇总

前端设计类网站汇总

设计前端类网站汇总 一、素材类 1、图片 其实国内对图片版权保护这块的意识不是很够，在免费的素材库和收费素材库都能找到同一张图片，但作者署名却都不一样。所以小编现在基本不用国内这些图库网，跟大家推荐几个免费又没有版权纠纷的图库网站…
阅读更多...
前端的你平时都在哪找免费的可商业用的图片素材？

前端的你平时都在哪找免费的可商业用的图片素材？

周末好！有段时间没有更新了，最近遇到找素材的苦恼，所以总结了一篇文章。前端中少不了与素材打交道，UI设计就更用说了，但能白嫖就白嫖，嘿嘿！！！下面推荐一下有关能免费的可…
阅读更多...
三个漂亮的网页登录页面源码及素材——可用于前端初学者练习HTMLCSS

三个漂亮的网页登录页面源码及素材——可用于前端初学者练习HTMLCSS

注：这三个登录页面涉及到的图片素材可自行寻找，字体图标素材可以在阿里字体图标库获取（https://www.iconfont.cn/home/index?spma313x.7781069.1998910419.2），如需原版素材可联系作者QQ（3416252112&#x…
阅读更多...
前端素材库网站集合——网站集合

前端素材库网站集合——网站集合

UI矢量图库 1.摄图网 https://699pic.com/ https://699pic.com/tupian/tubiao.html?from215 图片素材图库 1.图库 https://picsum.photos/ 随机获取图片&#xff1a;&#xff08;每次刷新都可以获取一个新的图片&#xff09; http://picsum.photos/360/460?random1<d…
阅读更多...
分享三个免费的前端模板网站

分享三个免费的前端模板网站

1、模板之家 网页模板,网站模板,DIVCSS模板,企业网站模板下载 http://www.cssmoban.com/ 2、站长之家 HTML5模板 HTML5模板免费下载 https://sc.chinaz.com/tag_moban/html5.html 3、jQuery之家 自由分享jQuery、html5、css3的插件库 http://www.htmleaf.com/
阅读更多...
前端好用的素材网站分享

前端好用的素材网站分享

前端设计推荐的一些网站&#xff09; 1.[站酷](https://www.zcool.com.cn/)2.[ColorPalette](https://arco.design/palette/list)3.[unDraw](https://undraw.co/illustrations)4.[OUCH](https://icons8.cn/illustrations/style--pale)&#xff08;应该是叫这个吧&#xff09;5.…
阅读更多...
前端常用素材网站整理

前端常用素材网站整理

最近整理了网页收藏夹&#xff0c;将平时遇到与前端相关的素材网站归置归置 注意&#xff1a;有的下载模版需要充值 PPChart 让图表更简单 echarts图表案例 很全 啥图都有 http://www.ppchart.com/#/ ———————————————————————————————————…
阅读更多...
Redis可视化管理工具推荐

Redis可视化管理工具推荐

AnotherRedisDesktopManager 码云地址&#xff1a;https://gitee.com/qishibo/AnotherRedisDesktopManager github地址&#xff1a;https://github.com/qishibo/AnotherRedisDesktopManager/ 很好用。推荐一下。
阅读更多...
Redis 管理工具 RedisInsight

Redis 管理工具 RedisInsight

Redis 安装好并运行一段时间后&#xff0c;如何清晰的看到 Redis 占了多大内存&#xff0c;有多少个 KEY&#xff0c;所占的网络如何&#xff0c;这个在 RedisInsight 下就是一目了然了&#xff0c;特别方便。 下载也特别简单&#xff0c;到此网站下载你想要的版本就行。 ps&a…
阅读更多...
Redis 管理工具 TreeNMS

Redis 管理工具 TreeNMS

今日&#xff0c;日月给大家介绍一款redis管理工具TreeNMS.下面我就详细给大家介绍一下treeNMS的安装及各项功能。 1、下载安装 下载地址&#xff1a;http://www.treesoft.cn/dms.html 下载到的是一个zip包&#xff0c;解压到指定的目录即可 windows下&#xff0c;直接双…
阅读更多...
在window系统安装reids、并使用Redis可视化工具进行管理

在window系统安装reids、并使用Redis可视化工具进行管理

下载地址 https://github.com/tporadowski/redis/releases 选择 Redis-x64-5.0.14.1.msi (微软的安装包 下载 安装好之后 打 开 一 个 cmd 窗 口 使 用 cd 命 令 切 换 目 录 到 安装目录下 D:\Program Files\Redis 执行命令 redis-server.exe redis.windows.conf 接下来…
阅读更多...
Redis 可视化工具

Redis 可视化工具

Redis 可视化工具 Redis做为现在web应用开发的黄金搭担组合&#xff0c;大量的被应用&#xff0c;广泛用于存储session信息,权限信息&#xff0c;交易作业等热数据。Redis作为业界最好的缓存数据库&#xff0c;过去几年发展很快。相对Memcached&#xff0c;Redis提供了更多种数…
阅读更多...
一款可视化的Redis管理工具-Another Redis DeskTop Manager

一款可视化的Redis管理工具-Another Redis DeskTop Manager

文章目录 前言项目地址 前言 “ Another Redis DeskTop Manager 是 GitHub 上的一个开源项目&#xff0c;是 Redis 可视化管理的利器&#xff0c;提供在 Windows、MacOS 平台的安装包&#xff0c;体积小&#xff0c;完全免费。” 提供了以可视化的方式管理 Redis 的功能&#…
阅读更多...
Redis管理工具（Redis Assistant）更新啦

Redis管理工具（Redis Assistant）更新啦

目前更新到1.3.0.0版本&#xff0c;引入以下功能&#xff08;下载链接&#xff1a;http://www.redisant.cn/&#xff09; 内存分析&#xff1a;使用Redis Assistant及时了解整个数据库内存使用情况&#xff0c;排查故障的好帮手。 多样化搜索&#xff1a;可以搜索Key&#xf…
阅读更多...
宝塔面板Redis数据管理工具hash和zset类型报错的解决方法

宝塔面板Redis数据管理工具hash和zset类型报错的解决方法

问题描述 在宝塔面板的Redis数据管理工具中,查询其他数据都没问题,但是查询hash和zset类型的数据时页面上会出现一个黑框,并且右侧没有出现数据. (写文章的时候已经解决了,所以没截到图,如果你也有这个问题,那你应该能明白我在说啥) 查了半天发现竟然没人提过这个问题,既然没有…
阅读更多...
Redis集群管理工具redis-trib

Redis集群管理工具redis-trib

Redis3.0 及其之后的版本提供了 redis-cluster 集群支持&#xff0c;用于在多个redis节点间共享数据&#xff0c;以提高服务的可用性。构建 redis-cluster 集群可以通过 redis-trib.rb 工具来完成。redis-trib.rb 是redis官方提供的一个集群管理工具&#xff0c;集成在redis安装…
阅读更多...
推荐一款 Redis 可视化管理工具——Another Redis Desktop Manager

推荐一款 Redis 可视化管理工具——Another Redis Desktop Manager

文章目录 :pushpin: 简介:clipboard: 基础配置基础设置 :pencil2: 使用方法1.连接Redis实例2.监控Redis性能3.执行Redis命令 :tada:下载安装1.下载地址2.安装 &#x1f4cc; 简介 Redis是一种快速、高效的NoSQL数据库&#xff0c;广泛用于缓存、会话管理、消息队列等领域。为了…
阅读更多...
推荐文章

Copyright @ 2022~2023