首页 > 其他分享 >采用rem网页自适应背景也自适应

采用rem网页自适应背景也自适应

时间:2024-01-17 10:22:37浏览次数:34  
标签:网页 background 背景 图像 适应 设置 rem size

采用rem网页自适应背景也自适应,设置background-size 属性

background-size 属性规定背景图像的尺寸

div
{
background:url(img_flwr.gif);
background-size:1rem 1rem;  
background-repeat:no-repeat;
}

CSS 语法

background-size: length|percentage|cover|contain;

属性值

描述 
length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

 
percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

 
cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

 
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。  

标签:网页,background,背景,图像,适应,设置,rem,size
From: https://www.cnblogs.com/handsomeziff/p/17969266

相关文章

  • 记录--终于搞懂了网盘网页是怎么唤醒本地应用了
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助写在前面用百度网盘举例,可以通过页面打开本机的百度网盘软件,很多软件的网站页面都有这个功能。这个事情一直令我比较好奇,这次终于有空抽时间来研究研究了,本篇讲的是Windows的,mac的原理与之类似,Mac文章已发布:(Mac版......
  • 仿sina个人轻微博html静态网页模板
    一款最新的仿sina个人微博html静态网页模板(轻博客/轻微博/贴吧主页、qq社交空间主题),模板清新简洁、新颖,包含关注、粉丝、人气、个人资料、文章、视频等。比较适合类似爱装扮空间的女生,二次元动漫、插画绘画等内容的个人轻社交博客的模板主题。 模板主题特色:1......
  • dremio 测试特性api 的开启&外部profile查看
    以前简单说过基于代码修改开启test的外部profile能力,实际上官方是由配置参数的,可以在启动的时候添加到配置中配置添加dremio.conf文件debug{allowTestApis:true}检查选项时候开启的一个技巧使用arthas命令使用了arthas的vmtool也可以结......
  • js爬取网页table数据
    result=""for(vari=2;i<=100;i++){varxpath='//*[@id="app"]/div/div[3]/div[1]/div[3]/div/div[2]/div/div[1]/div[1]/div/div/div/div/div/div/div[2]/table/tbody/tr['+i+']/td[4]/div[1]/span[1]/span/a......
  • js自动缩放页面自适应屏幕分辨率
    1.简单版:s=window.screen.width/1920;document.body.style.zoom=s;2. 当开发前端页面在分辨率1920的情况下,需要切换到小屏,有种方法是可以对屏幕比例进行缩放,通过css3属性transform可以自适应屏幕分辨率大小vars;functionresize(){s=window.screen.width......
  • delphi firemonkey使用 TListView 自定义列表数据
    设计界面如下把ListView的Item的Appearance为DynamicAppearance,并且把Item改为高度100添加Item代码procedureTForm1.Button1Click(Sender:TObject);varimg:TListItemImage;text1,text2,text3:TListItemText;beginvaritem:=ListView1.Items.Add;text......
  • Road Extraction from Remote Sensing Images Using the Inner Convolution Integrate
    landbench里面,李老师提到的encode-decode。remotesensing,大类是2区,小类是2到3区。分类的题目:“利用内部卷积集成编码器-解码器网络和定向条件随机场从遥感图像中提取道路”(pdf)“RoadExtractionfromRemoteSensingImagesUsingtheInnerConvolutio......
  • 网页设计(六)表格与表格页面布局
    一、设计《TF43:前端的发展与未来》日程表《TF43:前端的发展与未来》日程表文字素材:前端是互联网技术的重要一环,自上世纪80年代万维网技术创立以来,Web成就了大量成功的商业公司,也诞生了诸多优秀的技术解决方案。因其标准性和开放性,前端技术社区非常活跃。前端技术虽然起步......
  • 蓝色时间轴个人博客网页模板代码
    看雪时间轴个人博客模板,女生唯美简洁个人博客静态页面模板,蓝色时间轴个人网页模板,下雪空间个人模板代码1、html页面代码<!doctypehtml><html><head><metacharset="gb2312"><title>看雪时间轴个人博客模板-bokequ.com</title><metaname="keywords"content="蓝色......
  • `git push` 报错:error: remote unpack failed: unable to create temporary object di
    祸首:wsl:检测到localhost代理配置,但未镜像到WSL。NAT模式下的WSL不支持localhost代理;修改:NAT改镜像问题1:在自己的服务器上新建git仓库时,推送就一直报错;最开始一直推送失败,怀疑是WSL的网关由NAT改为镜像了......