GVKun编程网logo

CSS显示：无和可见性：隐藏（css中显示与隐藏）

16

对于想了解CSS显示：无和可见性：隐藏的读者，本文将是一篇不可错过的文章，我们将详细介绍css中显示与隐藏，并且为您提供关于android–GL表面和可见性：已经消失了、CSScol可见性：折叠在Ch

对于想了解CSS显示：无和可见性：隐藏的读者，本文将是一篇不可错过的文章，我们将详细介绍css中显示与隐藏，并且为您提供关于android – GL表面和可见性：已经消失了、CSS col可见性：折叠在Chrome上不起作用、css – 为什么设置溢出：隐藏;打破背面可见性声明？、css – 使用背景可见性“翻转”一个框时,闪烁的背面可见性的有价值信息。

本文目录一览：

CSS显示：无和可见性：隐藏（css中显示与隐藏）

CSS显示：无和可见性：隐藏（css中显示与隐藏）

我有一个div,用于在需要时显示警报.

如果我想关闭它一段时间后,我可以使用display：none或应该使用display：none和visibility：hidden？

所以一个或两个.

谢谢.

解决方法

依靠.如果您需要将空格留空,即空格不会被下面或周围的其他元素所占据,您将需要可见性：隐藏.否则,使用display：none,这将允许其他元素移动到元素的位置.

没有理由使用两者.

android – GL表面和可见性：已经消失了

android – GL表面和可见性：已经消失了

所以我的应用程序中有一个GLSurfaceView由GLSurfaceView.Renderer呈现并使用JPCt作为库.

表面处于不可见的RelativeLayout(可见性：已消失).当我将可见性更改为“可见”然后再返回“已消失”时,布局会按预期显示和隐藏,但GLSurfaceView不显示,它只显示并且不会隐藏,即使我可以单击现在的项目它背后.

这似乎是一些图形缓冲问题,但我没有找到办法让这个工作…任何想法？
谢谢！

解决方法

SurfaceView(和扩展的GLSurfaceView)是 Android中有趣的野兽.来自Android javadoc的引文：

The surface is Z ordered so that it is behind the window holding its
SurfaceView; the SurfaceView punches a hole in its window to allow its
surface to be displayed. The view hierarchy will take care of
correctly compositing with the Surface any siblings of the SurfaceView
that would normally appear on top of it

Android有一个内置的窗口合成器(窗口在这里有一点不同的含义).您的状态栏是一个窗口,您的活动有一个窗口.但是如果你的活动包含一个表面视图,那么就会创建另一个窗口,只是为了保持表面,而android compositor会在窗口中绘制你的视图.所以SurfaceView实际上只是一个透明区域.当你隐藏它时,区域不会被绘制,不会对触摸做出反应,但是表面窗口仍然存在,android不够聪明,无法隐藏窗口.

我会推荐两种解决方案

>让你的表面半透明.然后,当您需要隐藏视图时,可以渲染空表面(Android,Transparent sub-GLSurfaceView in layout?)>完全从视图层次结构中删除视图>另一种有点hacky方式是子类化GLSurfaceView并在可见性更改为GONE时调用onDetachedFromWindow().我没有测试过它,它可能无法正常工作.

CSS col可见性：折叠在Chrome上不起作用

CSS col可见性：折叠在Chrome上不起作用

我试图在HTML代码中隐藏一些col.使用MDN colgroup和col添加,我正在玩cols的样式.

< td>内容文本“可见”在所有浏览器中都可见(好),内容文本“隐藏”在chrome(坏)中可见并隐藏在Firefox和Edge中. (好).

我可以重新创建问题的最短代码在这里：

<!doctype html>
<html>
    <head>
        <title>css example</title>
        <style type='text/css'>
            col.visible {}
            col.hidden { visibility:collapse; }
        </style>
    </head>
    <body>
        <table border='1'>
            <colgroup>
                <col>
                <col>
                <tbody>
                    <tr>
                        <td>visible</td>
                        <td>hidden</td>
                    </tr>
                </tbody>
            </colgroup>
        </table>
    </body>
</html>

解决方法

你是对的,chrome不能正确支持可见性：表行和列折叠 – 按照 bug进行更新.我们计划在未来几个月内处理它,但它可能在2017年底之前不会出现稳定.对坏消息感到抱歉.

css – 为什么设置溢出：隐藏;打破背面可见性声明？

css – 为什么设置溢出：隐藏;打破背面可见性声明？

我有一个“可翻转”的模态对话,由两个div(正面和背面)组成： 

<div>
    <div>
        <div>
             <h1>Front</h1>
        </div>
        <div>
             <h1>Back</h1>
        </div>
    </div>
</div>

使用CSS转换我通过将“翻转”类添加到模态内容中来翻转模式以显示背面：

.modal-content.flipped {
    -webkit-transform: rotateY(180deg);
}

这一切都很好……除非我添加溢出：隐藏;属性到模态内容.突然,后部div不可见,而前部div的背面变得可见(即使背面可见性设置为隐藏).

这看起来很奇怪.为什么设置overflow属性会以这种方式改变背面可见性？

你可以在这个小提琴中看到它：https://jsfiddle.net/amxp02mx/.它工作正常,但如果你在CSS中注释掉第31行,使溢出：隐藏,它就会被破坏.

有谁能解释为什么？

解决方法

document.querySelector(".modal-content")
    .addEventListener("click",function () {
    this.classList.toggle("flipped");
});
.modal-dialogue {
        z-index: 1050;
        display: block;
        width: 25rem;
        min-height: 30rem;
        margin-left: -12.5rem;
        margin-top: -15rem;
        position: fixed;
        left: 50%;
        top: 50%;
        -webkit-perspective: 800px;
    }
    .modal-content {
        width: 25rem;
        min-height: 30rem;
        position: relative;
        background-color: transparent;
        border-radius: 10px;
        outline: none;
        transition: 0.8s ease;
        -webkit-transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 1s;
        margin: 5rem auto 0 auto;
        
        /* With overflow:hidden; the back of the panel is 
        not visible and the backface-visibility:hidden 
        stops working. Why? */
        overflow: hidden;
        
        /* With overflow: visible; it works fine. */
        overflow: inherit;
    }
    .modal-content div {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        color: white;
        font-size: 140px;
        font-weight: bold;
        text-align: center;        
        overflow: hidden;
    }
    .modal-content .front {
        background: red;
        z-index:0;
    }
    .modal-content .back {
        background: blue;
        -webkit-transform: rotateY(180deg);
        z-index:-1;
    }
    .modal-content.flipped {
        -webkit-transform: rotateY(180deg);
    }
<div>
    <div>
        <div>
             <h1>Front</h1>

        </div>
        <div>
             <h1>Back</h1>

        </div>
    </div>
</div>

你可以在文档中看到解释：
https://drafts.csswg.org/css-transforms/#grouping-property-values

你也可以通过添加来轻松解决问题

overflow:hidden;

到.modal-content div规则

https://jsfiddle.net/amxp02mx/4/

css – 使用背景可见性“翻转”一个框时,闪烁的背面可见性

css – 使用背景可见性“翻转”一个框时,闪烁的背面可见性

我正在使用一个相当简单的CSS转换,通过同时转换两个div 180deg创建一个“翻转”的框.当你在盒子的“后面”时,它应该是稍微透明的,所以你可以看到底面.

在所有浏览器中,除了最新的Safari 7和iOS 7之外,我都可以很轻松地工作.在Safari 7中,动画片闪烁,后卡在动画结尾处“弹出”到前面.

这似乎是在较新的Safari上呈现动画的错误.有没有解决办法让这个行为更好？

查看Chrome和Safari动画的gifs

见这里演示http://cssdeck.com/labs/flippable-card

解决方法

不能在Safari上测试,但Chrome之前发生了类似的错误.

在这种情况下的解决办法是将z的背面移动1px

.card__back { 
    transform: rotateY(180deg) translateZ(1px); 
    backface-visibility: hidden; 
} 

.card--flipped .card__back {
    transform: rotateY(0deg) translateZ(1px); 
}

这在Chrome中发生,因为在动画时,空间顺序被计算(我的意思是,3d空间中的元素的位置),并且它覆盖了其他因素.

动画结束后,不再使用该计算系统.

正如我之前所说不能在Safari中测试,所以我可以确定这是一个解决方案.

今天的关于CSS显示：无和可见性：隐藏和css中显示与隐藏的分享已经结束，谢谢您的关注，如果想了解更多关于android – GL表面和可见性：已经消失了、CSS col可见性：折叠在Chrome上不起作用、css – 为什么设置溢出：隐藏;打破背面可见性声明？、css – 使用背景可见性“翻转”一个框时,闪烁的背面可见性的相关知识，请在本站进行查询。

本文标签：

上一篇css – 具有显示flex的内部容器已损坏

下一篇CSS / JavaScript来裁剪图像（css裁剪图片代码）

相关文章