html如何设置网页的背景图片，使放大或缩小浏览器时，页面排版和背景可以随浏览器放大缩小而排版不会改变，

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量9.5k 收藏
点赞数 6
文章标签： 前端 HTML5 网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangdouhua/article/details/102856575
版权

用DIV+CSS写网页背景代码时，应该先写一个DIV，在这个DIV的CSS里面添加背景图片，并设置其margin为auto，宽度为100%或者auto；然后在这个DIV里面在写一个DIV，在第二个DIV里面设置CSS样式，宽度为背景图片的实际宽度，然后在写在背景图片之上的其他内容，这样用户在缩放浏览器的界面时，这个div里面的内容可以与图片位置相对固定，使排版不会随着界面的缩小或者放大而改变；具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/*---gywm---*/
.gywm { width:auto;
        height:430px;
        background: url(../images/gywm-bg.png) no-repeat center 0;
        color:#fff;
}
.gywm-con { width:1160px;
			margin: 0 auto;
}
.gywm h3 {
        font-size:36px;
        padding-top:40px;
        font-weight: normal;
}

.gywm p {
        font-size:18px;
        padding-top:35px;
        width:450px;
        line-height:37px;
}
.gywm span {
        font-size:24px;
        padding-top:235px;
        line-height:90px;
        color:#333;
padding-left: 30px;
}
.gywm img {
       padding-top:35px;
}
</style>
</head>

<body>
<!--/关于我们--> 
<div class="gywm">        //第一个div设置宽度为auto，可以使背景图片自动适应屏幕的大小，放大或缩小浏览器界面时图片可以居中显示；
<div class="gywm-con">     //第二个div设置宽度为背景图片的真实宽度，使用户在缩放浏览器的界面时，这个div里面的内容可以与图片位置相对固定，使排版不会随着界面的缩小或者放大而改变；
<h3>窈窕书女</h3>
<p>窈窕书女是为了继承和发扬中国传统文化——“女书文化”而诞生的女性礼仪相关品牌。 “女书文化”的发展、传承及其为符号承载的文化信息构成了女书风俗......</p>
<span>坚持口碑营销用成长说话，内外兼修、优雅绽放！</span><br/>
<a href="/pinpaijieshao/" title="查看更多"><img src="/statics/images/ckgd.png" /></a>
</div>
</div>
</body>
</html>
zhangdouhua
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
CSS纵向拉伸或随意放大缩小字体的宽高比例
07-17
首先，我们要明白，常规情况下，CSS中的`font-size`属性用于设置文本的大小，而字体本身的宽度和高度比例（宽高比）是固定的，这使得文字在放大时会按比例缩放，不会出现明显的拉伸效果。但如果我们想要实现纵向拉伸...
cajviewer - caj文件浏览器
03-21
通过CAJViewer，用户可以清晰地阅读文章内容，放大缩小页面，查找特定文字，甚至进行批注和标记，非常适合学术研究者和学生在查阅文献时使用。 除了基本的CAJ文件阅读，CAJViewer还具备文件转换的能力。它能够将CAJ...
html浏览器进行缩放百分比 界面和文字保持不变
weixin_45441173的博客
02-17 4122
html浏览器进行缩放百分比 界面和文字保持不变
如何让HTML页面中的背景图片自适应浏览器高度和宽度大小
大胖东的博客
01-20 6704
HTML页面中的背景图片自适应浏览器高度和宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML页面中的背景图片自适应浏览器高度和宽度</title> <style type="text/css"> body{ background: url(1.jpg) no-repe
html怎么把桌面的图片放大缩小,css怎么让图片随屏幕大小改变？
weixin_28955629的博客
05-31 3164
网页前台开发中的很多时候，我们需要让图片能够根据父元素自适应变化大小，从面使得网页排版更加美观。可是，很多小伙伴并不知道该怎么设置。那么，下面本篇文章就通过实例来为大家进行讲解！有时我们希望图片能随屏幕大小的缩放而缩放，两种情况：单个图片缩放图片在盒子内缩放裸图片的缩放img {width: auto;height: auto;max-width: 100%;max-height: 100%;} ...
html页面放大缩小样式不变,网页缩小放大后错位的解决方法
weixin_39625563的博客
06-09 1万+
今天同事人说网页缩小放大错位了，我就看了下真的错位了！纳闷怎么会这样,我仔细的看了看(心想谁会把网页缩小放大了看)，最后还是没办法说服上级，只能找方法解决了。经过仔细查看找到了问题所在。有多种原因。1、因为宽度原因。2、浮动原因(我就是这个问题)我是一个大DIV(固定宽度的)里面有两个小DIV(也是固定宽度的)一个左边一个右边。我也不知道为什么会错位，我就试着改样式。左边宽度不变,右边我把宽度去掉...
根据浏览器大小使网页内容自动放大缩小
m0_55837832的博客
10-15 3319
尽管是1920*1080的分辨率，在我电脑浏览器显示正常，在其他相同分辨率电脑显示与我的布局不同，还有伴有遮盖，乱码情况，这是因为窗口缩放比例可能不同造成。就像win 如何设置，使得不管神魔比例，都是100%的效果呢？添加如下代码 var t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5 document.body.style.zoom =1/ t; // 就去修改页面的缩放比例 参考：https:/
[html] 当网页放大或者缩小后如何让页面布局不乱？
歌谣的博客
04-09 7375
[html] 当网页放大或者缩小后如何让页面布局不乱？ 采用rem流式布局 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
浏览器放大缩小布局会乱的解决办法
qq_54030660的博客
11-18 3603
浏览器放大缩小布局会乱的解决办法
如何让网页的内容不随着网页的放大与缩小使网页布局发生错乱
热门推荐
weixin_52682014的博客
11-01 1万+
方法1：我们可以对全局和每一个div都写出宽和高来约束他 方法2：可以对主体内容设置一个最小宽度然后在里面固定宽高，这个宽度比电脑的宽度都低不少，一般为1000px左右。(不要忘记给每个大板块加 magin: 0 auto)
10个增强WEB字体排版的JQUERY插件.docx
02-27
它动态调整文本大小，避免因浏览器窗口缩小而产生的换行问题，使标题始终保持单行显示。 3. Bacon.js：这个插件允许文本沿着任意路径排列，类似于Adobe InDesign中的文本环绕功能。通过简单的坐标参数设定，可以...
css文字环绕图片—遇到的问题及快速解决方法
09-27
然而，当文本包含连续的英文字母或数字时，浏览器会按照单词来解析，如果一个单词的长度超过了容器宽度，浏览器不会将其拆分，而是将整个单词推到下一行，导致文字无法正确环绕图片。如下所示： ![文字环绕问题示例...
网页试题及答案7.pdf
09-13
14. **矢量图形**：矢量图形的优点是放大或缩小不会影响质量，适合于图标、线条艺术等设计。 15. **库项目**：库是Dreamweaver的一个功能，允许重复使用页面元素，每个库项目都有`.lbi`扩展名的关联文件。 16. **...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 804
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 370
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 994
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 589
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 276
【代码】TS如何处理js模块的类型？
css怎样设置页面全屏和缩放 页面内元素排版不会乱
03-28
设置页面全屏： 1. 使用CSS的height和width属性将body元素设置为100%。 ``` body { height: 100%; width: 100%; } ``` 2. 使用CSS的position属性将body元素定位为absolute。 ``` body { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } ``` 3. 使用JavaScript的全屏API将页面全屏。 ``` function toggleFullScreen() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else { if (document.exitFullscreen) { document.exitFullscreen(); } } } <button onclick="toggleFullScreen()">全屏</button> ``` 设置页面缩放： 1. 使用CSS的zoom属性将body元素设置为缩放比例。 ``` body { zoom: 80%; } ``` 2. 使用JavaScript的transform属性将body元素缩放。 ``` function zoomIn() { document.body.style.transform = "scale(1.5)"; } function zoomOut() { document.body.style.transform = "scale(0.5)"; } <button onclick="zoomIn()">放大</button> <button onclick="zoomOut()">缩小</button> ``` 页面内元素排版不乱： 1. 使用CSS的百分比布局，将元素的宽度和高度设置为百分比。 ``` .container { width: 80%; height: 80%; } ``` 2. 使用CSS的flex布局，将元素按比例分配空间。 ``` .container { display: flex; justify-content: space-between; align-items: center; } ``` 3. 使用CSS的media query，根据屏幕大小自适应布局。 ``` @media (max-width: 768px) { .container { flex-direction: column; } } ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值