当前位置:首页 > 天道酬勤 > 正文内容

css怎么隐藏元素(css里隐藏)

张世龙2021年12月20日 05:27天道酬勤910

1.元素的显示与隐藏

display、visibility的属性都可以实现元素的显示和隐藏

(1.1 )显示器:非; 隐藏元素;

显示:块; 用块级元素表示;

(1.2 )可见性:隐藏项; 隐藏元素;

可见性:可见性; 显示元素;

display和visibility的区别在于,使用display属性隐藏元素将不再占据原始位置。 使用visibility属性隐藏元素后,原始位置仍会被占用。

2.元素内容显示与隐藏

溢出属性设置溢出元素框内容的显示方式。

2.1 )溢出:可见性; 不进行限制,直接显示,作为默认值

) 2.2 )溢流:隐藏; 超出元素框的内容将被隐藏

2.3 )溢流:滚动; 无论内容是否溢出,都添加滚动条

2.4 )溢流:自动; 内容溢出时添加滚动条

3.元素显示与隐藏的应用

制造口罩效果。

实现创意:默认情况下隐藏遮罩层。 如果鼠标位于元素上,则显示鼠标;如果鼠标不位于元素上,则隐藏鼠标。

斯泰尔斯

* {

margin: 0;

填充: 0;

}

. outer {

位置:相对关系;

width: 520px;

height: 280px;

}

/* mask元素缺省情况下不显示,设置为绝对位置,父元素设置为相对位置*/

.屏蔽{2}

显示器:无;

位置:绝对;

top: 0;

left: 0;

width :百分之百;

height: 100%;

mask元素的背景颜色、图标*/

后台3: RGBA (12,12,12,0.2 ) URL ) imges/arrow.png )无重复中心;

}

/*拟似类实现鼠标进入掩码元素时的效果*/

. outer :移动器.掩码{

显示:块;

}

/样式

主体

div类='外部'

img src='imges/tb.jpg' alt=' '

! - -掩模层-

div类='屏蔽'/div

/div

/body )。

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/25410.html

标签: csspgc
分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。