web前端基础——背景图片
作用:设置背景图片大小
语法:background-size: 宽度 高度
取值:
取值 | 场景 |
---|---|
数字+px | 简单方便,常用 |
百分比 | 相对于当前盒子自身的宽高百分比 |
contain | 包含,将背景图片等比例缩放,直到不会超出盒子的最大范围 |
cover | 覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白 |
原图效果
contain效果
如果图的宽或高与盒子的尺寸相同了,另一个方向会停止缩放,导致盒子可能会有留白
cover效果
保证图片的宽和高与盒子的尺寸完全相同,有可能导致图片显示不全
web前端基础——背景图片相关推荐
- WEB前端基础(HTML+CSS+JavaScript)(上)最好看最详细的笔记~
WEB前端基础 当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础 一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
- HTML及CSS基础入门:web前端基础,看这一篇就够了
写在开头:这是一篇有关于HTTP和CSS的基础入门教程.你也可以将他当作一本字典,因为我将所有可能用到的语法结构全部设置了标题,你只需要点击标题即可跳转过去.同时,我在最后放置了两个CSS实战,以供读 ...
- web前端基础与CSS入门
web前端基础 1.嵌套列表 注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
- iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
- Web前端基础知识整理
1. 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确 ...
- html web前端基础(1)
html web前端基础(1) 本人暂时所用的学习软件是HB(HBuilder) 所以下方代码展示也是在HB所呈现的 什么是web : 1.典型的应用: 1.C / S ***** client: 客 ...
- html clear属性值,【Web前端基础知识】clear使用方法
[摘要] 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.下面是[Web前端基础知识]clear使用方法,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提 ...
- 在Eclipse中 Web项目 插入背景图片
标题在Eclipse中 Web项目 插入背景图片 将存放图片的文件夹放在WebContend文件夹内: 在jsp中用CSS时:
- 怎么把http图片改成背景图HTML,web前端:将图片设置成页面的背景-网页页面设置...
如题,字面上的意思,今天小编,就是来跟大家说一下,一个网页做一个图片背景! 将图片设置成背景,那么先找背景素材,这个背景素材可以到各大图片网站找! 那么为什么今天小编要讲这个呢? 在做一个网页中,如果 ...
最新文章
- [END_OBJECT] but found [FIELD_NAME]')
- 【数理知识】《数值分析》李庆扬老师-第9章-常微分方程初值问题数值解法
- PanDownload复活了!速度60MB/s!
- linux mysql定时增量备份_Mysql 日常备份和增量备份脚本(Linux)
- Boot Loader的启动流程和开发经验总结
- python语音转文字软件_python编写语音转文字软件|语音转文字工具免费版下载(语音批量转换文字) v2.0 最新版_数码资源网...
- icmp消息类型报告传输_ICMP消息的类型和ICMP消息格式
- LNMP环境--搭建Discuz论坛
- 软件中打开其他软件的方式
- gan loss gan_我的GAN怎么了?
- FusionCharts破解方法
- 有限元计算计算机配置,关于有限元分析的电脑配置问题
- 科研论文画图技巧分享!超级实用!
- java 反编译软件 推荐
- ”VT-x is not available (VERR_VMX_NO_VMX)“ 和 “VBoxManage: error: Details: code NS_ERROR_FAILURE”问题
- 爬虫——代理IP的高匿、匿名、透明介绍
- ASCII 与 UNICODE 字符映射表
- Ubuntu16.04安装graph-tool采坑指南
- 计算机组成原理之基本组成
- NOIP2012 国王游戏 题解
热门文章
- 模型机设计(VERILOG)-模型机结构与Verilog语言
- PC、单片机、DSP、FPGA、ARM资源对比
- 软文推广写作掌握多种文笔风格让文字“如沐春风”
- python绘制3d动态模型_基于HTML5和WebGL的三维可视立体动态流程图
- 计算机自动化装配专机,自动化装配线
- 正在读王小波的《沉默的大多数》感觉不错的话就贴出来
- UE5使用插件Quixel Bridge报错
- 智慧城市大数据平台信息化建设及行业智慧应用综合解决方案
- Unity 声音播放控制:Audio Mixer
- Matlab 实现磁测数据日变改正