h5 背景图不自适应

2024-11-10

H5 背景图片自适应屏幕问题解决办法

今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法方法1: <style> body{ background:url(beijingtu.gif) top left; background-size:100%; } </style> 方法二: <body> <div id="Layer1" style="position:absolute; width:100%; heig

CSS-自定义高度的元素背景图如何自适应以及after伪元素在ie下的处理

我都好久没更新了! 遇到一个效果,之前没有考虑清楚,设置了固定高度,到了后边,产品要加长,我就觉得设计得从新弄张长点的背景图!这不多余么? 其实分析原图还是可以再切分,再细化到不用改设计图,让我们前端页面各种适应,做到重复利用. 于是就有了这个问题和如下的一连串问题. .最外层父元素{height:auto;background:url(../images/hot_c_bg_g.png) repeat-y center top #2807b3;} 一定是y轴重复本来想用css3的backgr

CSS背景图怎么自适应全屏（手机或者电脑）

#demo{ background-img:url(../bg.png); --(1)适用于上半部分背景图片,下半部分纯色将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器) background-size:cover; --(2)将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内. background-size:contain; --(3)最简单粗暴的方法,缺点会给背景拉伸变形; background-size:100% 100%: }

CSS背景图拉伸自适应尺寸，全浏览器兼容

突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉伸这个问题产生时,CSS3也只是浮云.... 对于IE而言网上常见的方法是使用CSS滤镜,但那时Firefox还小,Chrome还没出生,IE称霸天下.....但如今,我们用三四行简短的代码就能实现全浏览器兼容的方法: .bg{ background:url(http://wyz.67ge.com/

CSS背景图拉伸自适应尺寸

.bg{ background:url(images/test.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%; }

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签能够通过固定宽高的方式来压缩大图.从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧.css3出了一个非常牛逼的属性background-size能够直接设置背景图的宽高,直接攻克了前者的疑惑. 那么问题来了,我们的网页

background-size做自适应的背景图

background-size做自适应的背景图在我们做页面布局的时候往往会遇到这样的情况当我固定一个元素的尺寸,在像元素加入背景的时候发现背景图片的原始尺寸很大,当我把背景图写入时往往超过元素很大一部分我们只能看见一部分的背景图在元素内显示! 如图所示这是我的背景图我有一个div要加入这张背景图结果发现显示的结果和设计需要的效果完全不一样. div{ width: 400px; height: 200px; border: 1px solid red; background: url(2.j

NGUI 背景图自适应

背景图UISprite组件调整如下: UIRoot设置: 不保持比例自适应: 保持宽与屏幕宽一致,高度随宽的缩放比例进行缩放:

vue下登录页背景图上下空白处自适应等高

遇到需求,登录页面需要顶部和底部上下等高,并且随着浏览器自适应上下高度. 解决方法: vue界面的data中先定义 data() { return { windowHeight: "", topHeight: "" }; }, mounted中: mounted() { this.windowHeight = window.innerHeight; // 浏览器可见区域高度 ) / + "px"; // 浏览器可见区域高度 - 600为背景图高度

css背景图自适应全屏显示

前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之后完美显示,依照大神所说还"不失真"(虽然我不管失不失真). 笔记如下: body{ margin: 0; padding: 0; font-family: sans-serif; background: url(../img/bg.jpg) no-repeat center 0px; b

css背景图自适应

在开发时,修改了d2admin的登录页面.使用了背景图片,但是ui给的图过于大(可能是我电脑屏幕小哈)无法完整的显示到页面上,所以修改了代码,可以完整显示背景图. 代码如下:background: url(./image/img.jpg) no-repeat 0px 0px; background-size: cover; background-attachment: fixed;

全屏背景图的实现及background的相关属性

今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图二) 这里给定了宽,也就是设备宽度的100%,同时给定了高,比如这里设置为8.5rem (html的字体设为20px); 1. 首先我们考虑用img标签来放图片路径,可是这种方法是很难控制图片高度的,如果我们设置宽度100%,让高度自适应,那么实际

前端学习笔记系列一：15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+alt+向下箭头,快速复制一行背景图设置: 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 用C

冒泡，setinterval，背景图的div绑定事件，匿名函数问题

1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b").click(function(){alert("b")}) $("#c1").click(function(){alert("c1")}) $("#c2").click(function(){alert("c2&q

在Excel表里面插入背景图

工作中我们会经常用到MS Excel,通常我们打开MS Excel,里面的工作表都是空白单调的背景.当然了,MS Excel可以在工作簿里面插入背景图片.那么问题来了,如果你没有安装Microsoft Office,该如何在Excel文件里面插入好看的背景图呢?下面我跟大家分享一下如何在C#中使用免费控件来实现这一功能. 在这里我使用了一个免费控件——Free Spire.XlS,有兴趣的朋友可以下载使用. 需要添加的命名空间: using Spire.Xls; using System.Dra

遭遇input与button按钮背景图失效不显示的解决办法

笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器Safari.Opera下不兼容的问题,其中IE6最为棘手,历来IE6就被诸位前端代码人员所诅咒,无奈其用户在中国大陆又非常多!可恶的微软啊,你当年造IE6的时候为何不严格遵守W3C标准呢? 今天做公司的交友网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪

关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

html css <div class="register-wrapper"> <div class="register"> <h1><span class="icons icons-home"></span>XXX网站首页!</h1> <div class="register-links-wrapper"> <ul class=&

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完<CSS高效开发实战:CSS 3.LESS.SASS.Bootstrap.Foundation>,给自己的未来打气! 5.1 设定背景图的大小在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的.如果同样的图片要

使用Canvas绘制背景图

原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS7一致了.首页图标下方漂浮着若干大小不一的泡泡,十分梦幻.大家可以访问 beta.icloud.com 体验下,如果觉得泡泡不够多,还可以加上 crazyAwesome 参数让泡泡变得更加疯狂. 上面提到的泡泡效果,有许多种实现方案.本文要讨论的是iCloud使用的Canvas绘制背景图方案.这样做

texturepacker打包图片，场景切换时背景图有黑边

在使用TexturePacker打包图片之后,背景图在场景切换(有切换动画)时,明显能看到有黑边,在百度之后解决了. 知乎上边有网友贴出了两种解决方法,我抄过来如下: 第一种: 修改 ccConfig.h 将 #define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 0 改为 #define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 1 第二种: 在AppDelegate::initInstance()方法的最后调用CCDirect

JS编写背景图切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图切换</title> <style type="text/css"> #wrap{ width: 300px;height: 225px; margin: 100px au

h5 背景图不自适应

热门专题