移动设备部分不支持background—size解决办法

最新推荐文章于 2021-05-02 09:50:49 发布
最新推荐文章于 2021-05-02 09:50:49 发布
阅读量776 收藏
点赞数
分类专栏： web前端 文章标签： url filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangSlin_csdn/article/details/47054845
版权

<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <title>移动设备部分不支持background—size解决办法</title>
    <style>
        body,div.img{padding:0;margin:0;}
    </style>
</head>
<body>
    <div id="Layer1" style="position: absolute; width: 100%; height: 100%; z-index: -2; top: 0px;">
        <img src="images/download_bg.png" style="height:100%; width:100%;" />
    </div>       
</body>
</html>

 

<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <title>移动设备部分不支持background—size解决办法</title>
    <style>
        
        #Layer2 {
            background-image: url('images/bg_1.png');
            background-size: cover;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/bg_1.png', sizingMethod='scale');
        }
    </style>
</head>
<body id="Layer2">
   <h2>移动设备优先</h2>
</body>
</html>

 

 

 

代码只有abc
关注
专栏目录
android webview css样式不支持,解决低版本安卓系统中webview对css的background写法不兼容问题...
weixin_42393650的博客
05-26 875
背景对接第三方app的时候发现内嵌网页里面的背景图死活出不来，但是在同一个手机上的微信自带浏览器确是正常的，通过各种尝试终于发现问题，记录一下。对方使用的方式是app里面内嵌一个webview加载我方的手机端页面，这个页面在大部分流行的安卓机器上都使用正常，没有出现过大的样式偏差，但是一放进app里面样式就出现了问题。具体表现是一个div容器的背景图出现不了，背景颜色也没有了。分析首先把原来的代码...
【rem】【样式出错】css使用rem 在部分移动设备中样式出错的解决方法
01-20
然而，由于不同设备和浏览器对`rem`单位的支持程度不同，有时在部分移动设备上可能会出现样式错误。在本文中，我们将探讨这个问题，并提供一种解决方法。 问题描述： 在一些特定的移动设备上，如华为荣耀9、华为...
background-size ie8不支持怎么解决
weixin_34007020的博客
05-08 138
background-size这个属性是css3，新增的属性，现在很多浏览器已经支持了，但是IE系列的浏览器却没有支持，比如IE8，下面介绍下如何解决这个问题   在IE浏览器中，可以通过滤镜filter来实现。 background-image: url('test.jpg');  background-size: cover;  filter:progid:DXImageTransf...
background-size失效
weixin_42349568的博客
07-05 1146
background-size要写在background-image后面，否则background-size不会生效 如： .content .lineTop .ulBox2 li .comBox2:nth-of-type(3) .imgBox{ background-size: cover; background: url(img3/3.jpg) no-repeat; } 就会无效 需要把 background-size写在background-
关于THINKPHP VIEW视图 使用background-size cover失效的问题解决
BowenXu11的博客
05-02 369
关于THINKPHP VIEW视图 使用background-size cover失效的问题解决 这几天写一个小的web程序，由于没有前端辅助，所以一切都自己搞定 找了一圈，发现了一个layuimini的开源框架，是基于layui的模版框架。 非常适合自己。 没想道第一个login就遇到了问题 描述一下，layuimini的login.htm css样式是写在html内部的 copy过来之后，发现 backgorund-size属性 cover失效 一番尝试的过程，一开始曾经怀疑是本地的apache有问题
css3 background-size:cover IE8不支持 解决办法
細水、長流√的专栏
04-12 4003
因为IE8浏览器这个坑，不支持css3的background-size:cover这个属性，当时有一个很大的图片需要做页面的背景，要适应不同分辨率的电脑，然后就遇到了这个问题 IE8虽然不支持这个属性，但是有一个filter​这个属性 个人认为是这样解释：微软Alpha图片加载器​ filter:progid:DXImageTransform.Microsoft.AlphaIma
CSS background 控制显示图片的一部分
09-25
同时，还可以使用`background-size`来调整背景图像的大小，以适应不同尺寸的容器。 总结来说，通过CSS的`background`属性，特别是`background-position`，我们可以有效地控制图片的显示部分，实现一图多用，提高...
css background-attachment属性进阶
01-19
前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。 取值： scroll:默认值，背景图相对于...
div100%平铺 浏览器缩小或在手机上查看 div背景显示不全bug的解决.rar
06-06
通过以上的方法，我们可以有效地解决`div`背景显示不全的问题，无论是在浏览器缩放还是在移动设备上查看，都能提供良好的视觉体验。在提供的压缩包文件中，很可能是包含了一个具体的示例代码或教程，帮助开发者实践...
rem适配移动设备的方法示例
11-21
【rem适配移动设备的方法示例】 在移动设备的网页设计中，适配不同屏幕尺寸是非常重要的。`rem`（root em）单位提供了一种灵活的解决方案，它基于HTML根元素（`<html>`）的`font-size`来计算元素的大小。这种布局...
background-size失效的问题及其基本用法
weixin_44226088的博客
11-19 7776
background-size的用法总结 CSS3 background-size 属性 指定背景图像的大小： 有四种值的写法 当背景图片出现太大或者太小的问题是可以使用cover属性自动铺满 cover于contain的区别是 contain 当x 轴或者y轴自动适应以后 另一个轴将不再拉伸 background-size与background-repeat background-position的区别 background-repeat 是当图像没有完全铺满时 背景图片是否x y轴重复 不会拉伸图像
IE浏览器下 background-size失效的问题解决
weixin_30642305的博客
07-12 474
可以通过滤镜filter来实现background-size的属性（其中图片的路径url要和src必须一样，同时路径必须是绝对路径，全路径才可以，否则会出错） eg: background-image:url('test.jpg'); background-size:cover; filter:progid:DXImageTransform.Microsoft.AlphaImag...
解决IE浏览器部分版本不支持background-size属性问题
热门推荐
道阻且长，行则将至
12-02 2万+
background-size是CSS3新增的属性，现在有很多浏览器都支持CSS3了。但是IE浏览器有些版本还是不支持，比如IE8，IE9也有些CSS3的属性会支持，但是有些也不支持。在这里就了解一下CSS3的background-size。 background-size 属性 1、定义： background-size 用来调整背景图像的尺寸大小。以象素或百分比显示，当指定为百分
解决设置了background-size: cover; 但是图片在ios下显示不完整的问题
weixin_30653023的博客
08-13 1147
设置 background-size: 100% 99.9%； 转载于:https://www.cnblogs.com/kugeliu/p/9469207.html
【转】微信小程序wxss的background本地图片问题。
Accpcjg的专栏
10-31 1554
【来源：https://www.jianshu.com/p/3b137371ac60】 在web 或者webapp开发中我们习惯了直接饮用本地图片做背景，例如。 .aaa { background: url('img/1.png'); } 但是这种引用方式在微信小程序中是无法使用的，控制台会显示如下   image.png 不允许使用本地路径。 于是我将路径替换为非本地路...
-webkit-background-size的使用
xiaoouh的博客
02-16 4723
当背景图太大，而屏幕太小时，页面无法将图片显示完全，这时使用background-position或者background-repeat并没有效果， 而是使用-webkit-background-size，这个可以设置图片的宽度与高度，宽度一般是百分号，而高度用px
background-size属性无效
qq_33644670的博客
05-21 5062
这样写 background-size 不生效。 background-size: 100% auto; background: url("../../assets/bg.jpg") no-repeat top left #000; 必须这样写才行。 background: url("../../assets/bg.jpg") no-repeat top left #000; back...
IE浏览器部分版本不支持background-size属性问题
dengkecou4635的博客
08-21 405
background-size是CSS3新增的属性，但是IE8以下还是不支持，可以通过滤镜来实现这样的一个效果 background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）； background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）； background-size ：100px 100px; // 调整图...
background-size: cover是什么
最新发布
08-04
例如，当我们使用background-size: cover时，无论是在较小的移动设备屏幕上还是在更大的电脑屏幕上，背景图像都会被自动缩放和裁剪，以适应背景区域的尺寸。这样可以确保背景图片始终填充整个背景区域，无论屏幕的宽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值