关于css背景图片显示不全问题

最新推荐文章于 2024-05-22 19:31:30 发布
最新推荐文章于 2024-05-22 19:31:30 发布
阅读量1.1w 收藏 5
点赞数 4
分类专栏： 刷题 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42573967/article/details/104301237
版权

一开始把背景图放到了body框架里，但是图片就是显示不全
去网上找解决办法，，跟着网上步骤一步步改，把background-size设置成100px,contain,cover都不成功。又重新去看自己的代码，图片路径，发现都没问题。又试着把图片设为不平铺还是不行。

          **之前图片**

在这里插入图片描述
本来就想着放弃着重新下一个css图片，说放到div里，试了下成功了。

          **之后图片**

在这里插入图片描述
在这里插入图片描述

二二得四
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS控制显示图片的一部分
04-09
NULL 博文链接：https://boonya.iteye.com/blog/1635844
解决vuejs项目里css引用背景图片不能显示的问题
12-12
解决：build->utils.js里，修改：增加 publicPath:'../../', if (options.extract) { ...以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也
css背景图片，在不同的分辨率下，显示不全
浮游的博客
05-13 480
这种方式设置的背景图片的大小,x轴会和盒子一样的宽，但是y轴由于默认为auto，根据上面的理论计算得背景图片的高度为300px,但是盒子只有50px高，超出的部分隐藏，所以看两种写法的效果自然就不一样啦。background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)这种方式设置完背景图片的大小后，会完全铺满整个盒子，并且背景图片的比例会因此改变为2:1。
css 设置背景图一半_css怎么背景图片显示不全？
weixin_39716044的博客
12-20 6296
css设置背景图片显示不全是因为背景图片过大导致的，我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。其中导致背景图片显示不全的原因是：设置背景图片所在div大小小于背景图片大小。示例：下面我们来看一下通过设置div大小来使背景图片完全显示：div{width:100px;height:100px;background-si...
（前端细节)背景100%平铺,浏览器缩小,背景显示不全bug
weixin_30426879的博客
10-11 265
<!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 ...
html 背景图全部显示,css怎么背景图片显示不全？
weixin_39616477的博客
06-18 5260
css设置背景图片显示不全是因为背景图片过大导致的，我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。其中导致背景图片显示不全的原因是：设置背景图片所在div大小小于背景图片大小。示例：下面我们来看一下通过设置div大小来使背景图片完全显示：div{width:100px;height:100px;background-si...
[WEB前端]图片显示不全的问题
Cedric_6的博客
03-14 1765
1
CSS设置背景图片模糊内容不模糊的解决方法
09-27
本文将详细讲解如何通过CSS设置背景图片模糊，而内容保持不模糊。 首先，我们要理解CSS的`filter`属性。`filter`属性允许我们应用各种视觉效果到元素上，如模糊、灰度、饱和度调整等。在我们的场景中，需要用到的是...
解决vue打包css文件中背景图片的路径问题
12-12
vue-cli写完的静态页面我们...但是打包后路径成了却出现404访问不到的问题。 解决的办法很简单 build路径下utils.js文件 // Extract CSS when that option is specified // (which is the case during production bu
不规则背景墙 CSS实现背景图片不规则的导航菜单
12-13
一般情况下导航菜单的背景图片都是比较有规则的，但是平时我们也会遇到很多背景图片形状不规则导航条（比如但鼠标移上的时候，背景图片不规则，本例只讨论此种类型）,如下图所示： （图一） 当鼠标移上去的时候背景...
css 设置背景图一半_img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
weixin_35662019的博客
02-01 2235
标签：17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域，图片左上角为0，0或0%，0%，右下角为高度和宽度，或100%，100%。clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域，分别是上右下左的顺序设置部分代码：i...
css中解决轮播图图片显示不全的问题，使用 background-size属性。
m0_49608552的博客
05-13 4256
css中解决轮播图图片显示不全的问题。
css样式之background-position:center center； 图片只显示一半的原因
qq_41877322的博客
12-18 754
css样式之设置background-position:center center; 导致背景图片只显示一半的原因
CSS问题：导航栏设置通栏后，放大页面背景显示不全
qq_44805077的博客
10-07 1820
问题描述： 正常显示时：将网页放大到150%后： 解决办法： 当导航栏设置为width:100%或不给宽，是相当于当前文档流而言的，也就是浏览器窗口的大小。 此时假设浏览器窗口大小为1000px，那么这个通栏的宽度就是1000px，此时如果放大浏览器为1200px时，这个通栏的宽度并不会改变，仍为1000px，这时就会出现200px通栏的背景色无法显示。 添加通栏min-width :1200px(不能小于网页主体宽度） 补充： 若同时设置了width和max-width两个属性，则以下面规则显示宽度
解决background-size:cover时图片铺满但显示不完整?
Something的博客
10-24 1万+
body{ background: url('xxx.jpg') no-repeat center; background-size:100% 100%; }
css --关于背景图片显示不出来的情况
热门推荐
sinat_36841379的博客
03-23 1万+
关于背景图片，有些时候它可以正常地显示出来，但是有时候它却不可以，那究竟是什么原因呢？今天 我就是碰到了这个问题。 解决这个问题之前我们首先应该知道块级元素和行内元素，块级元素一般来说是可以设置宽和高的以及 其他的属性等等，但是行内元素是不可以设置宽高等属性的。块级元素和行内元素师取决于元素的类型 ，每一个元素都有自己的默认的类型。 接下来我们给出代码：看这里
background-image图片显示不完整解决办法
weixin_51110842的博客
07-19 4527
添加背景图以后显示 添加一个 .hear-bg{ width: 100vw; height: 64vh; background-size:100% 100%; } 就解决了
HTML背景图设置时出现的问题解决(通俗易懂)
最新发布
星途码客的博客
05-22 614
解决问题 1.只显示图片左上角一小部分 2.图片重复 中间的1和2是解释原理 若是想快点解决，可以直接用最后一张图片的第15和16行，配合使用
css背景图片自适应 图片全部显示
06-08
要使 CSS 背景图片自适应并且图片全部显示，可以使用以下 CSS 代码： ```css background-image: url('your-image-url'); background-size: cover; background-position: center; ``` 其中，`background-image` 指定背景图片的 URL，`background-size: cover` 表示将背景图片缩放至完全覆盖背景区域，`background-position: center` 表示将背景图片放置在背景区域的中心位置。这样，无论背景区域的大小如何，背景图片都会自适应并且全部显示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值