css如何实现背景图电脑端/手机端自适应功能
原创
 13:05:34
1006
css代码：@charset &utf-8&;
padding: 0
font-family: &Helvetica Neue&, Helvetica, Arial, sans-
font-size: 12
text-decoration:
width: 100%;
height: 100%;
overflow-x:
overflow-y:
width: 100%;
min-height: 100%;
.login-bg{
background:url(./bg.png) no-
background-size:
}html代码：&!DOCTYPE html&
&meta charset=&utf-8&&
&title&&/title&
&meta name=&renderer& content=&webkit|ie-comp|ie-stand&&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1&&
&meta name=&viewport& content=&width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8, target-densitydpi=low-dpi& /&
&meta http-equiv=&Cache-Control& content=&no-siteapp& /&
&body class=&login-bg&&
//你的内容
&/html&以上就是css如何实现背景图电脑端/手机端自适应功能的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
全栈工程师
文章总浏览数1 设置背景图片的两种方式：
方式一：&&img src="../img/10.jpg"/ class="back" id="Background"&
width: 100%;
height: 100%;
z-index: -100;
方式二：div class="body" id="Background"&&/div&
width: 100%;
height: 100%;
z-index: -10;
background-image: url(../img/10.jpg);
background-repeat: no-
background-position: 0px 0
background-size: 100% 100%;
2 解决手机端背景图片自适应问题
$(function(){
//设置背景图片高度
$("#Background").height($("#Background").height()); });
阅读(...) 评论()温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
淘尽网 http://www.tao3w.com 做最好的比价网站,做最好的数据抓取专家。
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
&img style="max-width:100%;overflow:" src="http://www.tao3w.com/upload/kindeditor/image/_15817.jpg" alt=""& &/div&这里就把图片固定在msg_desc里面了，方便吧。
阅读(17889)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'图片自适应大小（手机屏幕用的较多）',
blogAbstract:'一般图片自适应，有很多种方法，通常用js来处理，这里提供一个思路使用css来处理，不但简单，而且方便&div class=\"msg_desc\"&\t\t&img style=\"max-width:100%;overflow:\" src=\"http://www.tao3w.com/upload/kindeditor/image/_15817.jpg\" alt=\"\"&\t&/div&这里就把图片固定在msg_desc里面了，方便吧。',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:9,
publishTime:7,
permalink:'blog/static/',
commentCount:8,
mainCommentCount:1,
recommendCount:3,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'淘尽网 http://www.tao3w.com 做最好的比价网站,做最好的数据抓取专家。',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}&div&id="formbackground"&style="position:&width:100%;&height:100%;&z-index:-1"&
&img&src="pictures/background.jpg"&height="100%"&width="100%"/&
引用jquery:
&div&id="formbackground"&style="position:&z-index:-1;"&&img&src="10.jpg"&height="100%"&width="100%"/&&/div&
&script&type="text/javascript"&
$(function(){
$('#formbackground').height($(window).height());
$('#formbackground').width($(window).width());
兼容火狐、谷歌和IE浏览器:
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
背景图铺满整个页面：background-size:
background："images\001.png"background-repeat:no-background-size: ; background-attachment:}
阅读(...) 评论()CSS背景图片自适应屏幕大小
按时间排序
body{background:url(bglogo.gif)}; 默认自动上下左右平铺的。不是拉伸
.div{margin:0width:100%;height:100%;}
使用滤镜就可以了 &style type=&text/css&& body{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bglogo.gif',sizingMethod='scale'); background-repeat: no- background-positon: 100%, 100%; } &/style&
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
确定要取消此次报名，退出该活动？
请输入私信内容：