前端遇坑记录（二）——background-image横竖屏不统一

最新推荐文章于 2022-07-30 10:48:51 发布

东根

最新推荐文章于 2022-07-30 10:48:51 发布

阅读量913

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/a303944689/article/details/78062965

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

接上次的，这次增加了background-image，一个满屏背景。如上次所说，body已经废了，因此这次把background-image加在wrapper。

同样的，会有横竖屏高度不统一问题。

(1) 竖屏时，给wrapper设置height:100%，他高度不会变，必须加一个position:absulute

(2)但是照着上面这样做，横屏时，高度只会是屏幕高度，不是DOM高度

最后的解决办法是，wrapper的height仍旧设为百分百，正常情况下position:absolute，当屏幕横过来时，把position设置成relative。

这样横屏时的height 就时DOM的height了。

总结：height:100%得和position配合使用，不然真是大坑

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

东根

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

布局，全屏，横屏竖屏

Mr_haimeng的博客

08-19

2105

五大布局FrameLayout（框架布局），LinearLayout （线性布局），AbsoluteLayout（绝对布局），RelativeLayout（相对布局），TableLayout（表格布局）。1、FrameLayout 所有东西依次都放在左上角，会重叠，这个布局比较简单，也只能放一点比较简单的东西。 <?xml version="1.0" encoding="utf-8"?

2022web前端全栈完整整理——（二）csscss3篇

Bejpse的博客

05-13

262

1. css基础：https://alex-ss.blog.csdn.net/article/details/83053901 2. css3新增属性值initial：可直接取消某个元素指定的样式值使其变为默认值，如color:initial。 3. vue3中的.vue文件的style里的css可以使用js/ts中的声明变量，且支持双向响应：属性：v-bind(js/ts变量)。 <template> <div class='ace_class'>文本颜色</div&

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

CSS background/background-image显示问题小议

heiyou007的博客

10-21

1578

在做IFE2015春季task0001任务的时候，header下方的图片，我试着用background属性来解决，这时候问题来了。第一次代码 HTML 首页文章作品关于 CSS #pic { background: url(/img/back1.jpg

背景定位：background-position：水平垂直；

qingyisuo的博客

01-12

864

背景定位，在大的背景图里找背景图中的小区域，同时需要注意的时在已经定好的区域里，background-position：0px 0px;是背景图片左顶点和区域坐标原定重合，如图一，更重要的是这个背景定位需要移动的是图片，区域坐标原定是参照物，所以大部分找小区域多需要用到负数（-xxPX）,概念不多说，附图图一：图二：在background-position：x y;中： X为负数

css 图片自适应_每天一个CSS小技巧 - 内容元素的自适应

weixin_39600328的博客

11-29

330

大家都知道如果不给一个元素设定一个具体的height，它就会自动适应其内容的高度。但是如果我们希望width也有类似的行为，我们该怎么做呢？下面是我们实际的HTML：Let’s assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone ...

android动态设置windowBackground方法

liangtianmeng的专栏

01-12

1万+

getActivity().getWindow().getDecorView().setBackground(new BitmapDrawable(blurBitmap));

2022web前端全栈完整整理——（二）css/css3篇

斗师——Ace

05-06

588

H5页面（八）常见的问题二------填坑

斗师——Ace

06-09

1948

添加小程序，兑换各种视频教程/数据资源。 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="app...

前端技术分享之HTML&&HTML5

一剑飘雪的博客

10-08

981

前端技术分享之HTML&&HTML5 主要介绍了HTML的元素及其分类，HTML5新增的API及其用法

CSS美化页面

Vv_study_expe的博客

07-30

1033

CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。单纯使用html的属性来控制页面样式不方便www.rlteach.com张三...

android横竖屏切换时候Activity的生命周期

09-05

曾经遇到过一个面试题，让你写出横屏切换竖屏Activity的生命周期。现在给大家分析一下他切换时具体的生命周期是怎么样的

UI优化之windowBackground

码夫的专栏

05-09

2226

UI优化之windowBackground

Android-启动页“android:windowBackground”变型？

weixin_30514745的博客

04-26

2526

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/white" /> <...

android开发主界面 WindowBackGround 添加启动页显示解决白屏问题

七月七日晴52000的博客

12-11

2万+

以下只是我解决问题过程中的一点点个人总结，点滴积累，贵在坚持，感谢你的阅览！前言：为解决应用启动白屏和黑屏问题，设置了 windowDisablePreview 属性为 true ，导致应用从启动到显示 view 较慢，产品要求加一个启动页，快速响应桌面图标点击事件；下面是添加启动页的方法；方法有两种，分别是： 1. 新建一个启动页 Activity 作为应用入口，启动后立马显示

css3滑动图片旋转,CSS3多图滚动切换

weixin_26854829的博客

08-03

1178

多图滚动切换写在前面的话之前写多图切换时有童鞋建议多写写动画效果，也想和大家多多分享的，怎奈想象力不足，一直没找到合适的效果。最近在网上无意看到了一个多图滚动切换的效果，感觉看起来不错，遂写下来和大家分享一下。思路动画效果技术上严格依赖于以下几点，请大家熟练掌握，然后看下文就比较好理解了transform 属性animation 属性keyframes 自定义动画规则本文为3张图片滚动切换，每滚动...

css使背景图片旋转