Hướng dẫn visibility trong css

• Trang chủ
• Tham khảo
• CSS
• Thuộc tính visibility

Định nghĩa và sử dụng

Thuộc tính visibility xác định thành phần có được nhìn thấy hay không.

Cấu trúc

tag {
    visibility: giá trị;
}

Với giá trị như sau:

Ví dụ

HTML viết:

HỌC WEB CHUẨN
Toán Học
HTML
CSS

Hiển thị trình duyệt khi chưa có CSS:

HỌC WEB CHUẨN

Toán Học

HTML

CSS

CSS viết:

p.visibility {
    visibility: hidden;
}

Hiển thị trình duyệt khi có CSS:

HỌC WEB CHUẨN

Toán Học

HTML

CSS

Trình duyệt hỗ trợ

Thuộc tính visibility được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" và "collapse" không được hỗ trợ trong các trình duyệt trình duyệt Internet Explorer 8 trở xuống

• Trang chủ
• Tham khảo
• CSS
• CSS3
• Thuộc tính backface-visibility

Định nghĩa và sử dụng

Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay.

Cấu trúc

tag {
    backface-visibility: giá trị;
    -webkit-backface-visibility: giá trị;
    -moz-backface-visibility: giá trị;
}

backface-visibility có các giá trị như sau:

Ví dụ

HTML viết:

visible
hidden

CSS viết:

p {
    background: #cc0000;
    height: 100px;
    width: 100px;
    position: relative;
    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

Hiển thị trình duyệt khi chưa có backface-visibility:

Thêm thuộc tính backface-visibility vào CSS:

p {
    background: #cc0000;
    height: 100px;
    width: 100px;
    position: relative;
    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.visible {
	backface-visibility: visible;
	-moz-backface-visibility: visible;
	-webkit-backface-visibility: visible;
}

.hidden {
	backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

Hiển thị trình duyệt khi có backface-visibility:

Thuộc tính visibility chỉ ra một phần tử là ẩn hay hiện thị trên trang. Các giá trị nó nhận có thể là: visible hidden collapse

Ẩn đi một phần tử bạn có thể dùng display: none hoặc visibility: hidden visibility: collapse tuy nhiên lưu ý có sự khác nhau: visibility:hidden ẩn đi phần tử, nhưng phần tử vẫn chiếm chỗ trong trang hiện thị.

Ví dụ visibility:hidden

    Đoạn văn này bị ẩn đi.


    Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn.

Ví dụ visibility:hidden

Đoạn văn này bị ẩn đi.

Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn.

Ví dụ trên nếu sử dụng display: none thì phần tử ẩn đi và chõ nó chiếm bị thu hồi.

    
Ví dụ visibility:hidden
    

        Đoạn văn này bị ẩn đi.
    
    

        Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn.
    

Ví dụ visibility:hidden

Đoạn văn này bị ẩn đi.

Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn.