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

最新推荐文章于 2022-03-28 18:27:02 发布
原创 最新推荐文章于 2022-03-28 18:27:02 发布 · 855 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#url #filter

本文介绍了解决移动设备上背景图片不适应的问题，通过使用HTML与CSS结合的方法实现背景图片在不同尺寸屏幕上的自适应显示。文章提供了两种解决方案：一是使用绝对定位的div包裹图片元素并设置图片宽高；二是利用CSS的background-size属性配合滤镜实现背景图自适应。

<!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>

 

 

 

图解background-attachment、clip、repeat、size
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
09-08 1万+
创作不易 拒绝白嫖 点个赞呗 关注专栏 学透CSS,带你走进CSS的深处！！！ 前言 上文我们介绍了，背景图片以及渐变，但是仅仅学会那点，只是背景图片的九牛一毛，本文要介绍的backdround-* 大家族，也是背景图片千变万化的基石。 background-repeat ：如何平铺背景图片。 语法 单值语法 background-repeat：属性值； repeat：在两个方向上平铺图像。这是默认值。 background-image: url('./juejin.png'); background-.
react中使用react-draggable实现拖拽,并解决在移动设备中使用拖拽后点击事件无效
Mr.Wang开发日常
10-16 1680
npm i react-draggableimport Draggable from 'react-draggable' {wishCards.map((card, index) => (
background-size ie8不支持怎么解决
weixin_34007020的博客
05-08 169
background-size这个属性是css3，新增的属性，现在很多浏览器已经支持了，但是IE系列的浏览器却没有支持，比如IE8，下面介绍下如何解决这个问题   在IE浏览器中，可以通过滤镜filter来实现。 background-image: url('test.jpg');  background-size: cover;  filter:progid:DXImageTransf...
android webview css样式不支持,解决低版本安卓系统中webview对css的background写法不兼容问题...
weixin_42393650的博客
05-26 1099
背景对接第三方app的时候发现内嵌网页里面的背景图死活出不来，但是在同一个手机上的微信自带浏览器确是正常的，通过各种尝试终于发现问题，记录一下。对方使用的方式是app里面内嵌一个webview加载我方的手机端页面，这个页面在大部分流行的安卓机器上都使用正常，没有出现过大的样式偏差，但是一放进app里面样式就出现了问题。具体表现是一个div容器的背景图出现不了，背景颜色也没有了。分析首先把原来的代码...
background-size失效
weixin_42349568的博客
07-05 1261
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 449
关于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 4094
因为IE8浏览器这个坑，不支持css3的background-size:cover这个属性，当时有一个很大的图片需要做页面的背景，要适应不同分辨率的电脑，然后就遇到了这个问题 IE8虽然不支持这个属性，但是有一个filter​这个属性 个人认为是这样解释：微软Alpha图片加载器​ filter:progid:DXImageTransform.Microsoft.AlphaIma
【rem】【样式出错】css使用rem 在部分移动设备中样式出错的解决方法
01-20
然而，由于不同设备和浏览器对`rem`单位的支持程度不同，有时在部分移动设备上可能会出现样式错误。在本文中，我们将探讨这个问题，并提供一种解决方法。 问题描述： 在一些特定的移动设备上，如华为荣耀9、华为...
css background-attachment属性进阶
01-19
前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。 取值： scroll:默认值，背景图相对于...
div100%平铺 浏览器缩小或在手机上查看 div背景显示不全bug的解决.rar
06-06
通过以上的方法，我们可以有效地解决`div`背景显示不全的问题，无论是在浏览器缩放还是在移动设备上查看，都能提供良好的视觉体验。在提供的压缩包文件中，很可能是包含了一个具体的示例代码或教程，帮助开发者实践...
background-size失效的问题及其基本用法
weixin_44226088的博客
11-19 8738
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 519
可以通过滤镜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 1247
设置 background-size: 100% 99.9%； 转载于:https://www.cnblogs.com/kugeliu/p/9469207.html
background-size在ios下失效？
这个昵称没有被占用吧的博客
05-07 1993
最近天天被动画和音频折磨~个人比较喜欢用css，所以需求中碰到广告牌闪烁的需求，果断使用了css3的动画，代码如下： #ad { animation: changeAd 1s infinite; } @keyframes changeAd { from { background: ad1.png no-repeat center center; background-size: 100...
CSS—IOS的一些兼容性问题
weixin_43129114的博客
04-11 2746
1. 在IOS中select下拉框会出现黑背景 -webkit-appearance:none; background:url() no-repeat right; /*自己添加下拉箭头*/ background-size:; input框去阴影 -webkit-appearance:none; 2. 苹果手机滑动平缓效果 -webkit-overflow-scrolling:touch; ...
苹果手机 background-image 不显示图片问题处理
q2470588931w的博客
03-28 3803
前端样式问题，苹果手机，背景图片
解决设置了background-size: cover； 但是图片在ios下显示不完整的问题
hijk7的博客
07-11 1196
解决设置了background-size: cover; 但是图片在ios下显示不完整的问题
【转】微信小程序wxss的background本地图片问题。
Accpcjg的专栏
10-31 1649
【来源：https://www.jianshu.com/p/3b137371ac60】 在web 或者webapp开发中我们习惯了直接饮用本地图片做背景，例如。 .aaa { background: url('img/1.png'); } 但是这种引用方式在微信小程序中是无法使用的，控制台会显示如下   image.png 不允许使用本地路径。 于是我将路径替换为非本地路...
移动设备全屏页面设计与代码实现
移动全屏代码是网页设计中的一个重要概念，主要目的是为了让网页内容能够全屏展示在移动设备上，从而提供更好的用户体验。本代码通过使用HTML、CSS和JavaScript实现了移动全屏功能。下面详细解释相关知识点： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值