En el diseño de la página, a menudo usamos puntos de conocimiento que no son visibles, como menús secundarios, logotipos de títulos de páginas web, etc. Hoy resumiré los métodos de ocultación de elementos más utilizados.
<div class="w">
12345789
</div>
.w{
width: 100px;
height: 100px;
background-color: pink;
line-height: 100px;
text-align: center;
}
Opacidad
.w{
opacity: 0; }
Tenga en cuenta que aunque no es visible, todavía existe.
Cambiar rgba
.w{
background-color: rgba(255, 255, 255, 0); }
Cambiar solo el cuadro de transparencia de fondo todavía existe
pantalla: ninguna;
.w{
display: none; }
display: none; hará que el cuadro desaparezca y vacíe la posición
Posicionamiento
.w{
position: absolute;
left: -1000000px;
top: -1000000px;}
Tire directamente la caja fuera del área visible.
visibilidad: oculta;
.w{
visibility: hidden; }
Haga que el elemento sea invisible pero la caja todavía existe como opacidad
Texto del logotipo del título de la página web
.w{
text-indent: -9999px;
overflow: hidden; }
o
.w{
font-size: 0; }
Los métodos anteriores pueden hacer que el texto del logotipo del título sea invisible para los usuarios, solo para los motores de búsqueda.