两种背景图片不重复的铺满网页屏幕的方法对比（HTML/JSP）

最新推荐文章于 2024-08-24 12:19:24 发布

CuriosityLxn

最新推荐文章于 2024-08-24 12:19:24 发布

阅读量1.1w

点赞数 4

分类专栏： web前端开发之路 HTML相关 CSS相关 JavaScript相关文章标签： html

本文链接：https://blog.csdn.net/weixin_39431859/article/details/74837934

版权

本文对比了两种使背景图片不重复铺满网页屏幕的方法：一是图片宽高拉伸匹配浏览器，可能导致图片变形；二是图片按比例缩放保持原貌，平铺浏览器。

摘要由CSDN通过智能技术生成

前端布局入门中，基本上都逃不过平铺背景图片的问题，下面就介绍几种图片不重复铺满屏幕的方法。

方法一：

背景图片宽高拉伸至与浏览器页面一致

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三岁的HTML</title>
    <style type="text/css">
        #img {  
        z-index:-1;  /*

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CuriosityLxn

关注关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)

qq_36609655的博客

07-02

1万+

第1章Html Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。就是给文本加上含有语义的标签。接下来应该学习更多具体语义标签：一、结构（固定的结构） <html> <head> <title></title> </head> <bod...

html中背景图片铺满页面没有重复的效果

rmkloveme

11-28

5万+

刚开始设置背景图片的时候，能铺满页面，但是没有全部把页面展现出来，经过一番查资料，才搞明白。如下： background: url(../../../assets/login/login-background.jpg) no-repeat center 0px; background-position: center 0; background-size: cover; 设置这三个属性就可以达...

参与评论您还未登录，请先登录后发表或查看评论

CSS实现HTML背景图片拉伸铺满示例

01-19

上代码： CSS代码复制代码代码如下: #img { z-index:-1; filter: alpha(opacity = 85);/*设置透明度，针对 IE8 以及更早的版本。IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。*/ position:absolute;/*这里要注意一下，需要设置成 absolute，绝对定位。绝对定位使元素的位置与文档流无关，因此不占据空间*/ width:100%; height:100%; } 页面代码复制

HTML学习4--背景图片和插入图片

热门推荐

李公子的博客

04-02

5万+

html图片平铺不重复整个页面,JSP网页背景图片怎样不平铺，不重复出现啊...

weixin_39771987的博客

06-03

935

2016-07-10 13:12最佳答案1,Q:怎样把别人网页上的背景音乐保存下来?A:浏览该网页后,在你的 Windows\Temporary Internet Files 文件夹下可以找到该背景音乐的缓存文件，拷贝出来即可使用。如果还是找不见该文件，可以打开网页的源文件，找到音乐文件的 URL 路径，用“蚂蚁”等 FTP 软件进行下载。2,Q:避免有人从你分帧的主页的帧中径直进入网站,而不是从...

背景图片不重复显示

09-26

508

backgroud-repeat属性值如下.no-repeat,repeat-x,repeat-y no-repeat 不重复填充 repeat-x 横向重复填充 repeat-y纵向重复填充或者这样理解： no-repeat : 背景图像不平铺 repeat-x : 背景图像仅在横向上平铺 repeat-y : 背景图像仅在纵向上平铺

html图片或者背景图从屏幕中心向两端撑满屏幕

weixin_68658847的博客

06-13

374

html图片或者背景图从屏幕中心向两端撑满屏幕

20-HTML与HTML5常用标签(前端)

weixin_42688085的博客

12-24

1063

感谢你的路过，希望学生的笔记能给你一点微不足道的参考 Java基础思维导图，完整Java体系的链接一，B/S: Browser/Server 浏览器/服务器端 * 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序 * 优点： 1. 开发、安装，部署，维护简单 * 缺点： 1. 如果应用过大，用户的体验可能会受到影响 2. 对硬件要求过高 B/S架构详解 * 资源分类： 1. 静态资源： * 使用静态网页开发技术发布的资源。 * 特点： * 所有

JSP内置对像详细介绍(最详细)

thinkhi9999的博客

08-13

1022

jsp为了简化开发，提供了一些有容器实现和管理的内置对象，在jsp脚本标识内使用jsp内置对象时，不需要先定义这些对象即不需要在jsp页面中进行实例化，直接使用即可。jsp中共预先定义了9个这样的对象，分别为request，response，session，application，out，pageContext,config，page，Exception。 (1)request对象封装了由客户端生成的HTTP请求的所有细节，包括HTTP头信息，系统信息，请求方式，请求参数等。通过request对象提供的相应

背景图片铺满全屏

02-16

html背景图片铺满全屏

HTML_CSS_base

qq_42045298的博客

10-25

287

1. WEB. 1. 什么是WEB Web就是网页，是一种基于B/S的应用程序 B : Browser 浏览器 S ：Server 服务器 --------- C ：Client 客户端 S ：Server 服务器 2. Web 组成浏览器：代替用户向服务器发送请...

html 怎么让背景图铺满整个页面

AMU的博客

03-12

5万+

为了让背景图片铺满整个页面，我们可以这样设置

CSS实现响应式全屏背景图

dianchamian8747的博客

03-14

4427

body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直、水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片...

背景图片铺满整个页面

kepler星球的博客

03-09

415

1.页面 <div class=body></div> 2.样式 <style> .body{ width: 100%; height: 100vh; //页面高度铺满 background: url(../img.png) no-repeat; //背景图片 background-size: 100% 100%;//背景图片大小 background-attachment:...

html铺满整个页面_html 怎么让背景图铺满整个页面？

weixin_35159405的博客

02-01

1万+

html中，怎么让背景图片充满整个页面html 怎么让背景图铺满整个页面雨声潺潺，像住在溪边。宁愿天天下雨，以为你是因为下雨而不来。也就是一张网页内容有多长多宽，那一张背景图就要放大到那么大，例如本我自己试出来的，希望有用例子。CSS中如何设拉伸背景图片铺满屏幕我写的CSS代码是 #bg { width: 100%; height: 100%; background:url(ima#bg{mar...

html背景图片不重叠铺满,css背景图片怎么铺满

weixin_29275257的博客

05-31

8747

该方法适用于所有品牌的电脑。CSS设置拉伸背景图片铺满屏幕新建一个html文件，命名为test.html，用于讲解CSS中如何设置拉伸背景图片铺满屏幕。在test.html文件内，使用div标签创建一个模块，并设置其class属性为myclass，主要用于下面通过该class来设置css样式。在test.html文件内，编写标签，页面的css样式将写在该标签内。在css标签内，使用“*”初始化页面...

使用Java实现JSP/HTML页面截图功能

代码的核心部分是`cut`方法，它首先创建一个`FileInputStream`对象来读取源图片（假设是一个已经渲染好的JSP或HTML页面的静态图片），然后利用`ImageIO`类获取能处理JPEG格式的`ImageReader`实例。`ImageIO....