JavaScript 11　 永远居中的背景图片　

最新推荐文章于 2024-08-20 12:40:43 发布
原创 最新推荐文章于 2024-08-20 12:40:43 发布 · 548 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #url

本文介绍了一种使用HTML和CSS设置页面背景图片的方法，并详细说明了如何实现背景图片的居中显示、不重复以及固定效果。
<html>
<head>
</head>
<body>
<STYLE TYPE="text/css">
<!--
BODY {background-image: URL(蒙蒙6.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
-->
</STYLE>

</body>
</html>
十六、移动端-图片及背景图的缩放
快乐de馒头
09-05 1113
做了一组移动端的页面，在布局时遇到了一些问题，总结下以避免再次掉坑。遇到的问题：1.图片及带背景图片的块宽高等比缩放布局2.,padding百分比布局图片及带有背景图片的块的图片宽高等比缩放纯图片可以使用img标签，将其宽度设置成百分比，高度会自动按比例缩放。控制起来很方便。带背景图片的div就有点麻烦了，宽度可以使用百分比，但高度如果不设置具体数，会按照内容大小自动布局，这个问题处理起来有点点小麻烦。解决方案是使用百分比padding将块支撑起来，但具体的百分比padding如何计算。
JavaScript实例精通
01-11
13_2.htm 永远居中的背景图片。 13_3.htm 随机显示的背景图片。 13_4.htm 不停变换的背景颜色。 13_5.htm 背景颜色自己选。 第14章（\14） 示例描述：页面特效。 14_1.htm 页面全屏显示。 14_2.htm ...
js 特效 html 特效 背景图片居中
06-13
js 特效 html 特效 背景图片居中 js 特效 html 特效 背景图片居中
用javascript实现大背景图的居中
bacui1728的博客
05-31 287
//获取原图的宽度 var yuantuwidth = 1920; //获取当前的一个元素 var dom = document.querySelector(".banner"); //当窗口大小发生变化时调用的函数 window.onresize = function(){ //用当前的函数获取视口的宽度 var viewwidth = document.docume...
永远居中的背景图片
zgqtxwd的专栏
05-01 409
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
html和js图片上下居中的两种方法
FeiMeng的专栏
09-01 1万+
html让图片上下居中的两种方法，一种js实现，一种css实现
背景图片始终居中的两种方式
leng0920的博客
08-19 1万+
1、background:src("../images/123.jpg")no-repeat center center; 2、background:src("../images/123.jpg")no-repeat; background-poisitn:center;
css背景图居中
最新发布
程序员
08-20 648
【代码】css背景图居中。
js弹出的对话窗口永远保持居中显示
10-27
首先，我们了解到对话窗口居中显示的主要技术手段包括使用CSS的定位技术，以及JavaScript的动态调整窗口位置和大小。 1. CSS定位技术：在本例中，涉及到两种定位方式，即fixed和relative。`.Div_Scroll`类使用了`...
网页body背景图片拉伸
12-10
通过这些方法，我们可以实现“背景图片自动拉伸，背景永远都是一张整图”的效果。但是要注意，过度拉伸可能会导致图片失真，因此在选择背景图片时，应考虑其可拉伸性，并尽量选择适合这种处理的图片。 在提供的文件...
《JavaScript实例精通》[源代码]
09-21
13_2.htm 永远居中的背景图片。 13_3.htm 随机显示的背景图片。 13_4.htm 不停变换的背景颜色。 13_5.htm 背景颜色自己选。 第14章（\14） 示例描述：页面特效。 14_1.htm 页面全屏显示。 14_2.htm ...
css怎样让背景图片居中,CSS让背景图片居中显示的方法
weixin_42310670的博客
08-04 1万+
当我们的背景图片写成：background: url("images/titleborder.png") no-repeat;时，表示背景图片不重复，位置会默认为在div中居于左上角。例：#header {width: 100%;height: 400px;border: 1px solid;background: url("images/titleborder.png") no-repeat;}...
如何让背景图片居中？
qinduan007的博客
03-22 1万+
如何让背景图片居中 方法一：背景图片添加background-sizing:cover;这种方法会将背景图片拉升，改变背景图片的大小； 方法二：给背景图片调整位置background-position：center；这样不会给背景图片带来影响。 ...
js背景图片按比例充满全屏
FeiMeng的专栏
07-24 1万+
背景： Chrome中页面背景图片：background-size:cover;可以按比例放大图片而无损画质。 问题是实际在pc端测试时不知何故，图片只能显示原大小，其他设置无法按比例放大。 如果设置：background-size:100% 100%;只是拉伸图片，使之充满全屏，有损画质。 那么如何让图片充满全屏，又对背景图片画质无损呢？
CSS样式中,background-image 背景图片如何居中显示
热门推荐
{竹子}
08-28 3万+
body { margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; background-color:#CCDAF7; background-image:url(../images/loadbg.jpg); background-repeat:no-repe
javascript 如何截取字符串后两个字符的N种方法
狗剩的专栏
10-17 7984
 string="abcdefg"alert(string.substring(string.length-2,string.length))alert("abcdefg".match(/.*(.{2})/)[1])alert("abcdefg".match(/.{2}$/))alert("abcdefg".slice(-2)) 
浏览器内写JS测试代码--测试JS
狗剩的专栏
01-29 6481
控制台处输入JS代码，可及时显示执行，不用打开页面输入JS，保存，打开浏览器执行这么复杂的步骤。 Var  d=new Date(); 回车   -------注意js区分大小写；有智能感知功能； d.getTimezoneOffset();回车 如下图 d=new Date() d.getTimezoneOffset()   普通视图   --输入后回车执行数据就可以了
Validform_v5.1.js BUG 动态加载 datatype 属性
狗剩的专栏
05-07 3267
型号    A/B  （下拉列表） 编号  ***** （文本框）   如果要通过Validform 验证来控制一个文本框的文字范围，比如 A型号  17 位字符  B型号8位字符
AJAX Control TollKit ASPAJAXExtSetup.msi
狗剩的专栏
10-23 1488
web2.0横空出世，ajax首当其冲，今天做web的如果再不学点ajax的话，就显的落伍了，而学ajax的用的环境如果是asp.net，那ajax.net你就不得不学了。首先就是环境的配置，如下vs2005+sql2005+Winxp sp2+ie6.0+Office2003工具下载  1.ASPAJAXExtSetup.msihttp://download.microsoft.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值