解决IE不支持 background-size:cover;

最新推荐文章于 2020-08-10 11:00:13 发布

weixin_33781606

最新推荐文章于 2020-08-10 11:00:13 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dengxiaoqing/p/5138712.html

本文介绍了一种在CSS中设置背景图片的方法，并特别说明了如何让背景图片在不同浏览器下正常显示，包括针对IE6的特殊处理方式。还强调了图片路径的正确使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   .page{
      background:url(images/page2_bg.jpg) top center no-repeat; background-size:cover;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/page2_bg.jpg',  sizingMethod='scale');
      _filter:none;
   }

最后一句是针对IE6，没法平铺，只能背景图片居中显示

图片路径必须是绝对路径，也就是说，不能放在css文件里面，而要把此css放在html里面

转载于:https://www.cnblogs.com/dengxiaoqing/p/5138712.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33781606

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决XP IE8不支持css3的background-size问题实例

04-06

本实例主要关注的是如何解决在Windows XP系统下，使用Internet Explorer 8（IE8）浏览器时遇到的不支持CSS3 `background-size`属性的问题。这个问题是由于IE8浏览器的内核不支持CSS3新特性导致的，而`background-...

CSS3之背景尺寸Background-size使用介绍

09-25

- background-size属性在主流浏览器中都得到支持，包括Chrome、Firefox、Safari、Opera和IE9及以上版本。 - 兼容性前缀对于早期支持需要特别注意，如： - -moz-：针对早期版本的Firefox浏览器。 - -webkit-：...

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

兼容ie的background-size: cover;

weixin_30877755的博客

11-08

133

.bg{ background: url() no-repeat; background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../image/bg.jpg', sizingMethod='scale'); -ms-filter: "prog...

IE8兼容background-size:cover

08-18

658

方法1：background-image: url('file:///F:/test/images/flashbg.jpg'); background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',sizingMeth

css3 background-size:cover IE8不支持解决办法

細水、長流√的专栏

04-12

4082

因为IE8浏览器这个坑，不支持css3的background-size:cover这个属性，当时有一个很大的图片需要做页面的背景，要适应不同分辨率的电脑，然后就遇到了这个问题 IE8虽然不支持这个属性，但是有一个filter这个属性个人认为是这样解释：微软Alpha图片加载器 filter:progid:DXImageTransform.Microsoft.AlphaIma

IE浏览器兼容background-size

weixin_30262255的博客

07-31

185

background-size是CSS3新增的属性，IE8以下不支持，通过滤镜实现background-size效果 background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；background-size ：100px 100px; // 调整图片到指定大小...

解决IE浏览器部分版本不支持background-size属性问题

道阻且长，行则将至

12-02

2万+

background-size是CSS3新增的属性，现在有很多浏览器都支持CSS3了。但是IE浏览器有些版本还是不支持，比如IE8，IE9也有些CSS3的属性会支持，但是有些也不支持。在这里就了解一下CSS3的background-size。 background-size 属性 1、定义： background-size 用来调整背景图像的尺寸大小。以象素或百分比显示，当指定为百分

body style="background:url(media/background.jpg); background-size:cover; background-repeat:no-repeat;">

04-26

需要注意的是，`background-size`和`background-repeat`这两个属性在IE8及以下版本的浏览器中不支持，需要使用特定的hack方式来实现。而在IE9及以上版本、Chrome、Safari、Firefox等现代浏览器中则都得到了很好的...

background-size:cover IE8

05-17

在 IE8 中，`background-size:cover` 不被支持。您可以考虑使用 IE8 专用的 CSS 属性 `-ms-filter`，如下所示： ``` background-image:url('your-image.jpg'); -ms-filter:"progid:DXImageTransform.Microsoft....

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>彼岸花开</title> <style> body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; height: 1000px; } .banner { width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .banner video { position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%; pointer-events: none; } .banner .content { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; text-align: center; } .banner .content h1 { margin: 0; padding: 0; font-size: 3.5em; text-transform: uppercase; color: #d11090; } .banner .content p { font-size: 1.5em; color: #fff; } h1::after { content: ''; position: absolute; top: 0; left: 0; color: transparent; background-image: linear-gradient(to right, #c23616, #192a56, #00d2d3, yellow, #6d214f, #2e86de, #4cd137, #e84118); background-clip: text; -webkit-background-clip: text; clip-path: circle(100px at 0% 50%); animation: move 5s infinite; } @keyframes move { 0% { clip-path: circle(100px at 0% 50%); transform: translateX(0); } 50% { clip-path: circle(100px at 100% 50%); transform: translateX(10px); } 100% { clip-path: circle(100px at 0% 50%); transform: translateX(0); } } </style> </head> <body> <div class="banner"> <video autoplay loop muted> <source src="flower.mp4" type="video/mp4" controls>  </video> <div class="content"> <h1></h1> </div> </div> </body> </html>

最新发布

06-11

background-size: 200% 200%; /* 扩展背景尺寸，支持动画 */ -webkit-background-clip: text; /* 支持Chrome/Safari */ background-clip: text; /* 支持Firefox */ -webkit-text-fill-color: transparent; /* ...

background-size:cover兼容IE8的方法

man_tutu的博客

04-27

6436

background-size: cover; 可以通过滤镜filter来兼容IE8，实现相似的效果。

IE8下兼容background-size方法

zhpeng289的博客

07-30

1万+

background-size: length|percentage|cover|contain;IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。 CSS3 新增的 background-size 是一个很有用的属性，用于定义背景图片的尺寸，有了这个属性，你就可以任意指定背景图片的大小。其中最常用的值应该要...

如何通过background-size: cover让TP自动大小

qq_44484894的博客

04-01

1906

background-size: cover （图片大小自动适应）开发工具与关键技术：Dream weaver 、CSS样式作者：曾子千撰写时间：2019年2月10日如果想要一张图片和元素同样大小，但是图片它是不可能天生跟你随便创建的元素一模一样大小的，那么我们该如何去达成相对应的效果呢？首先创建一个元素，在样式中给它一个长宽高来规定它的形状，引入图片，这时图...

Video标签支持IE系列浏览器方法

QUX轻博客

05-08

1917

ie浏览器不支持html5标签，这个我们都知道，更别说支持video标签的各种属性了，那么有办法兼容吗？答案是肯定的！下面用js进行兼容：开头js引入...

IE8 支持的背景图样式不拉伸，cover效果

YiDaShi33的博客

03-08

1718

问题：background-size:cover IE8 不支持 解决：使用img作为背景图，用z-index来控制层级HTML：<div class="box">  <div class="bg"> <img src="banner.img" alt=""> </div>  <div class='c

解决background-size:cover时图片铺满但显示不完整?

Something的博客

10-24

1万+

body{ background: url('xxx.jpg') no-repeat center; background-size:100% 100%; }

background:url(image/road.jpg) no-repeat center的基本用法介绍