Heim > Artikel > Web-Frontend > CSS背景图拉伸不变形_html/css_WEB-ITnose
CSS背景图拉伸不变形_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:403002Durchsuche
在线效果体验：http://hovertree.com/texiao/mobile/3.htm
请使用手机浏览器查看。
css代码：
.bg{ background:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%; }
HTML文件代码：
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>DIV缩放背景自适应(不变形)jQuery-HoverTree</title><style type="text/css">a {color: white;}body {font-family: 幼圆,宋体,'Times New Roman', Times, serif;color:white;}.picwidth {width: 100%;text-align: left;filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";-moz-background-size: 100% 100%;background-size: 100% 100%;}body {margin: 0px;background-color: #120c0c;}.content {width: 206px;margin: 0px auto;padding-top: 10px;line-height: 16px;}.frame {width: 256px;margin: 0px auto;}</style><script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script></head><body><div class="frame"><div id="contentHead" style="height:231px;background-image:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg)" class="picwidth"><input type="button" value="放大" id="keleyibig" /><input type="button" value="缩小" id="keleyismall" /><a href="http://hovertree.com/hvtart/bjae/f43r3qry.htm">原文</a></div><div id="contentBody" style="background-image:url(http://hovertree.com/texiao/mobile/3/hovertree02.jpg);height:99px;color:White;" class="picwidth"><div class="content">今日人物：<div style="text-align:center">谢霆锋</div><br />请点击放大,缩小按钮。</div></div><div id="contentBottom" style="background-image:url(http://hovertree.com/texiao/mobile/3/hovertree03.jpg);height:124px" class="picwidth">DIV缩放背景自适应(不变形)<br />请使用支持HTML5的浏览器查看本页<br /><a href="http://hovertree.com/texiao/">特效库</a> <a href="http://hovertree.com">首页</a> <a href="http://keleyi.com">柯乐义</a> <a href="http://hovertree.com/hvtart/bjae/f43r3qry.htm">原文</a></div></div><script>$(function () {$(".frame").width(300);var documentWidth = $(document.body).width();if (documentWidth < 600)$(".frame").width(documentWidth);var cHead = $("#contentHead"); var cBody = $("#contentBody"); var cBottom = $("#contentBottom");function setHeight() {cHead.height(((cHead.width() / 320) * 289));cBody.height(((cBody.width() / 80) * 31));cBottom.height(((cBottom.width() / 64) * 31));}setHeight();$("#keleyibig").on("click", function (){$(".frame").width($(".frame").width() + 50)setHeight();})$("#keleyismall").on("click", function () {$(".frame").width($(".frame").width() - 50)setHeight();})})</script> </body></html> Web前端资源：
这张图可作为手机屏幕背景
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：网页在收藏夹中图标显示效果_html/css_WEB-ITnoseNächster Artikel：HTML <a> 标签的状态和 target 属性_html/css_WEB-ITnose