Html 如何关闭手机图像覆盖（CSS）

我是一名学生，当我的站点是移动大小时，我试图关闭图像覆盖。当你以1280px的速度悬停在图像上时，会出现文本。我希望在移动视图中显示段落，而不是图像覆盖。问题是，这些段落显示在笔记本电脑的全屏宽度上，而不是移动视图上。在我的html中，每个容器下都包含了一个移动视图段落

我的HTML：

生活方式写作

我写的这篇文章是关于能够花时间和自己在一起。
我写了这篇关于与自己共度时光的文章

如果要隐藏某些内容，请使用

display:none

而不是

visibility:hidden

，然后可以将其隐藏。您还缺少一些{}标记，请小心。我还需要关闭标签，而不仅仅是开始标签。

.container、.container三个{
位置：相对位置；
宽度：23%；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：90%；
宽度：100%；
不透明度：0；
过渡：放松；
背景颜色：米色；
}
.container:悬停。覆盖{
不透明度：1；
.responsiveflex容器{
显示：无；
可见性：隐藏；
}
.responsiveportfolioText{
可见性：隐藏；
显示：无；
颜色：白色；
}
@媒体屏幕和屏幕（最大宽度：450px）{
.portfolioText{
显示：无；
}
.overlay、.OverlayTo、.overlayfour、.OverlayTree{
可见性：隐藏；
}
.containerwo:hover.overlaywo，.container:hover.overlay，.containerfour:hover.overlayfour{
不透明度：0；
显示：无；}
.responsiveportfolioText{
显示：无；
文本对齐：左对齐；
字体大小：.5em；
字体大小：400；
显示器：flex；
颜色：黑色；
}
.responsiveflex容器{
显示器：flex；
能见度：可见；
}
}

到目前为止您尝试了什么？您实现了媒体查询吗？如果您想隐藏某些内容，请尝试使用hover的

display:none

。例如，如果您想消失

此处的一些文本

在hover上，您可以这样做：

。something:hover{display:none；}

然后将其隐藏在悬停状态。您的代码存在一些基本的编码问题。首先，最大的SmartPhone屏幕为480px。完全大于450px。其次，您的css代码无效。媒体查询需要使用

{

和

}打开

这是您忘记做的。第三，您的css只适用于媒体查询。更改内容的媒体查询需要低于实际css才能更改，否则正常代码将在媒体查询最后读取时写入媒体查询。设置my all the container悬停显示：移动显示不起作用。但是，现在e图像叠加在1280px下无法显示。我将尝试找出我的代码为什么会出错。谢谢您的帮助。

@media screen and (max-width: 450px)

.portfolioText{

visibility:  hidden;
}
    
    .overlay, .overlaytwo, .overlayfour, .overlaythree{
        visibility: hidden; 
    }
.containertwo:hover .overlaytwo, .container:hover .overlay , .containerfour:hover .overlayfour{
    
opacity:0;

visibility: hidden;

.responsiveportfolioText{

        visibility: visible;

        text-align:left;

        font-size: .5em;

        font-weight:400;

        display: flex;

        color:black;
}

.responsiveflex-container{

    display: flex;

    visibility:visible;
}

.portfolioText{

visibility:  hidden;

}