background背景图同比缩放铺满整个页面方法的时候碰到的问题

最新推荐文章于 2024-03-16 21:59:07 发布
最新推荐文章于 2024-03-16 21:59:07 发布
阅读量1w 收藏 6
点赞数 1
分类专栏： JavaScript 文章标签： html css background-size
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40319394/article/details/80506725
版权

做了那么多的静态页，没想到还是碰到了一个让我懵B的问题，

问题：

    我这里用了background-size:cover；背景图同比缩放铺满这个页面之后，如果拉伸屏幕，会发现如下图

    

尴尬，里面的内容还是原来的位置，但是图片同比缩放这样设置肯定是不行的，解决代码如下：

    

这个问题可能不算什么技术难点，不过遇到了解决了，就记录下来


叫我虫虫吧
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE下background背景图片无法显示问题解决方法
12-13
在做下拉框select的时候用一个箭头符号，作为下拉框的三角，在firefox和chrome下均可以正常显示，但是在IE下无法显示。 查找了很久，发现是图片格式问题，把png格式的转换成gif的就没有问题了。。。。 附相关代码，主要是html的： 复制代码代码如下: <style type=”text/css”> .select{ width:180px; height:29px; overflow:hidden; border:solid 1px #339999; border-radius:5px; background:url(images/arrow.gif) no-repeat 1
按F11页面底部有节点不显示问题（定位的坑）
canvas_hua的博客
10-17 495
最近我遇到这样的问题，我按F11进入页面全屏后，底部有一些节点信息没有显示，反复查看，它就在那，但就是不显示。 后来我才发现是定位惹得祸。把定位去掉就OK了...
图片与容器尺寸不符的几种解决方法（实现图片缩放）
最新发布
罗不丢的博客
03-16 1171
在网页编写，我们经常会插入图片来优化网页整体结构，增强用户体验感，在插入图片时，我们会有两种比较常见的应用场景，一种就是使用background-image属性插入背景图片，还有一种是使用img标签插入图片
f11全屏，h5的全屏api失效，f11/Esc取消全屏无法监听的解决
qq_43563070的博客
09-01 2899
控制全屏和取消全屏文件proFn.js class Profn{ constructor(vue,obj){ } } // 设置 全屏 Profn.fullPage = function (element) { //某个元素有请求 var requestMethod =element.requestFullScreen ||element.webkitRequestFullScreen //谷歌 ||element.mozRequestFullScreen
CSS：实现background-image背景图片全屏铺满自适应
qq_19306197的博客
09-24 1135
CSS：实现background-image背景图片全屏铺满自适应
jsp和html文件引用同一个css文件，但效果不同，html中的背景图片无法全屏显示
StephKuny的博客
04-06 282
jsp和html文件引用同一个css文件，但效果不同，html中的背景图片无法全屏显示 jsp页面采用是html标准 html页面采用的是html5标准 html标准下尹用以下css可以背景全屏，html5标准下不行 原因：应该是html5 body标签的background属性废弃了 改成以下问题解决 ...
怎么让背景图片铺满整个页面
zunguitiancheng的专栏
12-14 1万+
方法一、background背景图片设置 html, body { width: 100%; height: 100%; background: url(../images/bg.png) no-repeat; background-size: 100% 100%; background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/ } 方法二、图片绝对定位实现 <body> <div id="Laye...
CSS实现背景图图片全屏铺满自适应
qq_46093695的博客
02-13 1798
CSS实现背景图图片全屏铺满自适应
全面解析background背景铺满
luotaif的博客
07-25 3793
当我们给网页设置一个背景图或背景色时，如果这张背景图或背景色不能够填满整个网页，就会出现下面这样的情况：body {而background背景铺满就是指让背景色或背景图自动缩放铺满整个网页，不留任何空隙。通过background-size属性可以轻松实现background背景铺满，而通过background-position、background-attachment等属性的设置，可以使背景图像更加美观、完整。而动态背景则可以为网页增添生动感、节奏感。
div设置background图片后怎么让图片铺满div
fury的博客
11-28 6533
可以使用CSS中的background-size属性和background-image属性来实现将图片作为一个div的背景图并撑满屏幕的效果。当时用background-size:cover属性还是不行,尝试background-size:contain属性。可以使用background-image属性来完成。background-image: url("图片路径");background-image: url("图片路径");background-image: url("图片路径");
css中background:url背景图片如何铺满并正常显示
m0_37866091的博客
12-22 9162
.box{ height: 300px; width: 300px; background:url('../imgs/108.png') no-repeat center 0px; background-position: center 0px; background-size: cover; text-indent: -999px; } 说明： url(‘图片路径’)——图片路径的位置； no-repeat—— 图片不重复； repeat-x是横向铺满，就
HTML+css+JavaScript实现放大镜效果
09-07
HTML+css+JavaScript实现放大镜效果
CSS实现背景图尺寸不随浏览器缩放而变化的两种方法
12-13
一些网站的首页背景图尺寸不随浏览器缩放而变化，例如百度个人版的首页，缩放后背景图的尺寸并不改变：  再比如花瓣网( huaban.com )：   现在用CSS来实现这一效果。 首先需要一张足够大尺寸的图片，上图百度...
css background 背景图的设置方法
01-21
如下所示： 以上这篇css background 背景图的设置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
css 中background 设置文本框背景图 的方法
12-10
background 属性的作用是给元素设置背景，它是一个复合属性，常用的子属性如下： ...多数时候，我们都是给 div 等区块元素设置背景，其实还可以通过 background 属性来给文本框设置背景色和背景图片。呈现效果如下
前端vue-cli项目中使用img图片和background背景图的几种方法
12-30
前端中背景图片极其常用,但是很容易出现各种问题. 一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹. 一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. css方法 正常使用background属性即可...
使用layui 渲染table数据表格
热门推荐
无缺的博客
04-18 8万+
先上最终效果图：1，引入layui的css和js文件&lt;link rel="stylesheet" href="lib/layui/css/layui.css"&gt;&lt;script src="lib/layui/layui.js"&gt;&lt;/script&gt;2，在页面放置一个table元素&lt;table class="layui-hi
layui 给数据表格加序号
无缺的博客
06-11 5万+
1，第一种需求，只给当前页加序号（1），给你的数据加上 templet属性,cols: [[ {field:'tourPlayerId', width:80, title: 'ID1', sort: true,fixed: 'left',} ,{field:'zizeng', width:80, title: '排名',fixed: 'left',templet:'#zizeng'...
layui 表单回显数据，修改table表格数据
无缺的博客
03-30 3万+
如何在表单页面，回显数据？？？ layui提供:表单初始化赋值 链接：https://www.layui.com/doc/modules/form.html#val 代码如下： // formTest 就是class="layui-form" 所在元素对应的 lay-filter="" 对应的值 代码如下： form.val("formTest", { "us...
html铺满整个页面_html 怎么让背景图铺满整个页面？
05-28
可以使用CSS样式中的`background-size`属性来实现。...这样，背景图就会铺满整个页面。如果你想保持背景图的比例，可以使用`background-size: contain;`，表示背景图将被缩放以适应容器，但不会被裁剪。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值