说明：该文属于大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB私域社区。福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划加入私域社区。当前子专栏基础入门三大核心篇也是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益。作者：不渴望力量的哈士奇(哈哥)，十余年工作经验,跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划”发起人。现象级专栏《白宝书系列》作者，文章知识点浅显

文章目录一、插入图片1、简介2、代码示例二、背景图片1、简介2、代码示例一、插入图片1、简介插入图片:插入图片方式:在HTML中,使用标签可以插入一张图片;插入图片适用场景:显示内容,按钮,一般都使用插入图片的方式展示图片,设置插入图片大小:通过设置盒子模型内容尺寸而设置图片大小;width设置图片内容宽度;height设置图片内容高度;设置插入图片显示位置:通过设置盒子模型左边距和上边距而设置图片的位置;margin-left设置图片的左外边距;margin-top设置图片的上外边距;代码示例: img{ /*设置图片大小*/ width:200px; height:200px; /

文章目录一、插入图片1、简介2、代码示例二、背景图片1、简介2、代码示例一、插入图片1、简介插入图片:插入图片方式:在HTML中,使用标签可以插入一张图片;插入图片适用场景:显示内容,按钮,一般都使用插入图片的方式展示图片,设置插入图片大小:通过设置盒子模型内容尺寸而设置图片大小;width设置图片内容宽度;height设置图片内容高度;设置插入图片显示位置:通过设置盒子模型左边距和上边距而设置图片的位置;margin-left设置图片的左外边距;margin-top设置图片的上外边距;代码示例: img{ /*设置图片大小*/ width:200px; height:200px; /

目录background-image:url("")；background-repeat属性（背景平铺）background-size属性（设置背景图片大小） background-position属性（背景图片位置）1.background-image:url("");首先要知道background-image是将图片作为背景，使用方法为：background-image:url("");其次是关于图片路径问题，如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹那么直接填写back.jpg；background-image:url(back.jpg);如果该css文件和背景图片

目录background-image:url("")；background-repeat属性（背景平铺）background-size属性（设置背景图片大小） background-position属性（背景图片位置）1.background-image:url("");首先要知道background-image是将图片作为背景，使用方法为：background-image:url("");其次是关于图片路径问题，如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹那么直接填写back.jpg；background-image:url(back.jpg);如果该css文件和背景图片

HTML5Geolocation（地理定位）HTML5Geolocation（地理定位）用于定位用户的位置。定位用户的位置HTML5GeolocationAPI用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。浏览器支持InternetExplorer9+,Firefox,Chrome,Safari和Opera支持Geolocation（地理定位）.注意:Geolocation（地理定位）对于拥有GPS的设备，比如iPhone，地理定位更加精确。HTML5-使用地理定位请使用getCurrentPosition()方法来获得用户的位置。下例是一个简

HTML5Geolocation（地理定位）HTML5Geolocation（地理定位）用于定位用户的位置。定位用户的位置HTML5GeolocationAPI用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。浏览器支持InternetExplorer9+,Firefox,Chrome,Safari和Opera支持Geolocation（地理定位）.注意:Geolocation（地理定位）对于拥有GPS的设备，比如iPhone，地理定位更加精确。HTML5-使用地理定位请使用getCurrentPosition()方法来获得用户的位置。下例是一个简

uni-app小程序图片使用有image标签和background-image背景图两种方式：下有获取本地图片的网络地址方式：见第四步一、方式一：使用image标签引入：uni-app官方image1.官方文档说：src仅支持相对路径、绝对路径，支持base64码；但是我使用了网络地址https也可以显示目前支持以下四种方式引入： view>引入image的绝对路径src：/view>imagesrc="~@/static/iconimg/big.png"mode="scaleToFill"/>view>引入image的相对路径src2/view>imagesrc="../static/ico

uni-app小程序图片使用有image标签和background-image背景图两种方式：下有获取本地图片的网络地址方式：见第四步一、方式一：使用image标签引入：uni-app官方image1.官方文档说：src仅支持相对路径、绝对路径，支持base64码；但是我使用了网络地址https也可以显示目前支持以下四种方式引入： view>引入image的绝对路径src：/view>imagesrc="~@/static/iconimg/big.png"mode="scaleToFill"/>view>引入image的相对路径src2/view>imagesrc="../static/ico

background中的cover与contain的区别contain：将图片缩放至宽度或者高度能够完全适应容器，并且保持图片宽高比不变。如果容器宽高比与图片宽高比不同，则容器会留白，不会出现图片的裁剪。例如，对于一个宽度为200px、高度为200px的容器，背景图片使用background-size:contain，并且图片的宽度为300px，高度为150px，则图片会被等比例缩放至宽度为200px，高度为100px，留下50px的空白区域。cover：将图片缩放至能够铺满整个容器，并且保持图片宽高比不变。如果容器宽高比与图片宽高比不同，则图片多余的部分会被裁剪。例如，对于一个宽度为200p