前端:如何让background背景图片进行CSS自适应

在设置login背景时,找到了一张这样的图片:

image

但是设置成login背景时,如果没有做一些css适应设置,图片就变样了,变成了这样:

image

严重变形了,这就造成了一种理想与现实的差距。

若想解决这个自适应问题,其实很好解决,只需要在前端代码里加上这样css即可:

  1 .main {2   background: url(../assets/main.png) no-repeat;3 4   /**添加以下css */5   height: 100%; //大小设置为100%6   width: 100%; //大小设置为100%7   position: fixed;8   background-size: 100% 100%;9 }

再刷新看一下效果:

image

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

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

相关文章

JavaScript实现飘窗功能

实现飘窗功能很简单 html代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title…

遗留系统现代化:7步入门数字化转型

遗留系统对企业来说可能是一把双刃剑。虽然它们曾经对企业很有帮助&#xff0c;但随着时间的推移&#xff0c;这些应用程序、系统和架构变得过时&#xff0c;最终会限制企业发展。 为了实现保持竞争优势所需的扩展、业务敏捷性和数字化转型&#xff0c;越来越多企业意识到需要…

低压无功补偿在分布式光伏现场中的应用

摘要&#xff1a;分布式光伏电站由于建设时间短、技术成熟、收益明显而发展迅速&#xff0c;但光伏并网引起用户功率因数异常的问题也逐渐凸显。针对分布式光伏电站接入配电网后功率因数降低的问题&#xff0c;本文分析了低压无功补偿装置补偿失效的原因&#xff0c;并提出了一…

【BigDecimal类—常用API系列】解决java浮点计算精度损失问题

文章目录 Java浮点计算精度损失问题BigDecimal进行精确运算的解决方案 Java浮点计算精度损失问题 BigDecimal它是干什么用的呢&#xff1f;什么是java浮点计算精度损失问题&#xff1f;我们先看一段代码&#xff0c;看这个代码有什么问题&#xff1f;再说BigDeimal这个类是干什…

Java:TCP 通信方法(基本发送 + 接收)并 实现文件传输且反馈

TCP 通信编程 TCP:是一种可靠的网络协议&#xff0c;再通信两端都建立一个Socket对象。 通信之前要保证连接已经建立。 通过Socket产生IO流进行通信。 创建对象时&#xff0c;会连接服务器&#xff0c;连接不上&#xff0c;会报错。 所以&#xff0c;先运行服务端&#xff0c;再…

【C语言】数据在内存中的存储

目录 练笔 整型数据的存储&#xff1a; char 型数据——最简单的整型 整型提升&#xff1a; 推广到其他整形&#xff1a; 大小端&#xff1a; 浮点型数据的存储&#xff1a; 存储格式&#xff1a; 本篇详细介绍 整型数据&#xff0c;浮点型数据 在计算机中是如何储存的。…

基于SSM的小儿肺炎知识管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

深度学习之网络优化与正则化

视频链接&#xff1a;7.1 神经网络优化的特点_哔哩哔哩_bilibili 神经网络优化的特点 网络优化的难点 &#xff08;1&#xff09;网络结构差异大&#xff1a;不同模型之间的结构差异大——没有通用的优化算法、超参数多 &#xff08;2&#xff09;非凸优化问题&#xff1a;…

maui sqlite开发一个商城加购物车的演示(3)

购物车界面及代码 <?xml version"1.0" encoding"utf-8" ?> <ContentPage xmlns"http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x"http://schemas.microsoft.com/winfx/2009/xaml"xmlns:syncfusion"clr-namesp…

基于ssm vue的风景文化管理平台源码和论文

摘 要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;基于vue的木里风景文化管理平台也不例外&#xff0c;但目前国内的市场仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人工管理显然已无法应对…

【二分查找】【区间合并】LeetCode2589:完成所有任务的最少时间

作者推荐 【动态规划】【广度优先】LeetCode2258:逃离火灾 本文涉及的基础知识点 二分查找算法合集 有序向量的二分查找&#xff0c;向量只会在尾部增加删除。 题目 你有一台电脑&#xff0c;它可以 同时 运行无数个任务。给你一个二维整数数组 tasks &#xff0c;其中 ta…

SpringCloud微服务 【实用篇】| Docker启示录

目录 一&#xff1a;Docker启示录 1. Docker启示录 2. Docker和虚拟机的区别 3. Docker架构 4. Centos7安装Docker 4.1. 卸载 4.2. 安装docker 4.3. 启动docker 4.4. 配置镜像加速 前些天突然发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽…

yaml 文件格式

yaml文件&#xff1a;是一种标记语言&#xff0c;以竖列形式展示序列化的时间格式&#xff0c;可读性高 类似于json格式。语法简单。 yaml通过缩进来表示数据结构&#xff0c;连续的项目用-减号来表示。 yaml文件使用的注意事项&#xff1a; 1&#xff0c;大小写敏感 2&am…

HT4125 低压CMOS 缓冲门器件 单电源电压转换

​​亿胜盈科HT4125 是一款低压CMOS 缓冲门器件&#xff0c;可运行在针对便携式和电池设备的更宽电压范围内。 其采用了较低阀值电路来设计此输入&#xff0c;以便匹配Vcc 3.3V 时的1.8V 输入逻辑&#xff0c;并且可被用 在1.8V 至3.3V 电平上行转换器功能中。此外&#xff0c;…

数据爬虫:获取申万一级行业数据

目录 1. 获取访问接口 2. 链接网址 3. 链接名单 免责声明&#xff1a;本文由作者参考相关资料&#xff0c;并结合自身实践和思考独立完成&#xff0c;对全文内容的准确性、完整性或可靠性不作任何保证。同时&#xff0c;文中提及的数据仅作为举例使用&#xff0c;不构成推荐…

如何应对网站的Canvas等高级指纹和MAC地址检测?

随着互联网技术的发展&#xff0c;网站和应用程序采用了越来越多的高级指纹和MAC地址检测技术来追踪用户和识别其身份。其中&#xff0c;Canvas指纹是一种常见的高级指纹检测技术&#xff0c;而MAC地址是设备的唯一标识符。在本文中&#xff0c;我们将了解Canvas指纹和MAC地址的…

联通宽带+老毛子Padavan固件 开启IP v6

联通宽带开启IP v6 参考&#xff1a; 联通宽带开启 IPV6 的方法_联通ipv6怎么开通-CSDN博客 个人宽带如何开启IPv6网络访问 - 知乎 (zhihu.com) 首先&#xff0c;你要确定当前你所在的地区运营商已经开通了IPV6&#xff0c;可以使用手机流量 IP查询(ipw.cn) | IPv6测试 | IPv…

电商早报 | 12月13日| 2023胡润男企业家榜发布:黄铮位于第三

2023胡润男企业家榜发布&#xff1a;拼多多创始人跻身前三 12月12日消息&#xff0c;胡润研究院发布《2023胡润男企业家榜》&#xff0c;列出了胡润百富榜中前50名中国男性企业家&#xff0c;总财富6.37万亿元&#xff0c;上榜门槛640亿元。 这是胡润研究院首次发布“男企业家…

概率的乘法公式

两个事件的情况 假设A、B为随机事件&#xff0c;并且事件A的概率&#xff0c;那么 三个事件的情况 假设A、B、C为随机事件&#xff0c;并且&#xff0c;那么 多个事件的情况 假设为随机事件&#xff0c;其中&#xff0c;并且&#xff0c;那么

【Linux系统编程二十一】:(进程通信3)--消息队列/信号量(system v标准的内核数据结构的设计模式)

【Linux系统编程二十】&#xff1a;消息队列/信号量(system v标准的内核数据结构的设计模式&#xff09; 一.消息队列二.system v标准的内核数据结构的设计三.四个概念(互斥/临界)四.信号量1.多线程并发访问2.计数器3.原子的4.总结 一.消息队列 一个叫做a进程啊&#xff0c;一个…