Đặt Div phủ lên TOÀN BỘ trang (không chỉ chế độ xem)?

95

Vì vậy, tôi có một vấn đề mà tôi nghĩ là khá phổ biến nhưng tôi vẫn chưa tìm ra cách giải quyết tốt. Tôi muốn tạo một div lớp phủ che TOÀN BỘ trang ... KHÔNG chỉ là khung nhìn. Tôi không hiểu tại sao điều này rất khó thực hiện ... Tôi đã thử đặt chiều cao nội dung, html thành 100%, v.v. nhưng không hoạt động. Đây là những gì tôi có cho đến nay:

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

Tôi cũng muốn có một giải pháp trong JavaScript nếu nó tồn tại, nhưng tôi muốn chỉ sử dụng một số CSS đơn giản.

html css

— Polaris878
nguồn

Có thể đọc thêm ở đây: stackoverflow.com/questions/1938536/…

— Marco Demaio

Điều này có thể thực hiện được với jQuery không?

— William Entriken

226

Chế độ xem là tất cả những gì quan trọng, nhưng bạn có thể muốn toàn bộ trang web không bị tối ngay cả khi cuộn. Đối với điều này, bạn muốn sử dụng position:fixedthay vì position:absolute. Cố định sẽ giữ phần tử tĩnh trên màn hình khi bạn cuộn, tạo ấn tượng rằng toàn bộ phần thân bị tối đi.

Ví dụ: http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>

— Sampson
nguồn

3

Tôi có thể sai, nhưng vị trí cố định sẽ làm việc trong IE6 ?! Tôi biết có lẽ không ai quan tâm nhiều đến IE6 nữa.

— Marco Demaio

29

@Marco Không chắc chắn. Thành thật mà nói, nếu hỗ trợ cho trình duyệt 10 năm tuổi không được yêu cầu rõ ràng, tôi sẽ không bận tâm nữa :)

— Sampson

5

Vậy làm thế nào để các bạn làm điều đó trên thiết bị di động? bradfrostweb.com/blog/mobile/fixed-position

— BorisOkunskiy

3

+1 Cảm ơn! Tôi đã mở rộng ví dụ của bạn bằng cách thêm một cửa sổ bật lên phía trên lớp phủ: jsbin.com/okabo3/740

— kol

vấn đề mà tôi đang gặp phải với điều này (được nhiều plugin sử dụng) là khi bạn nhấp vào một <select>phần tử trong iOS, nó sẽ di chuyển toàn bộ khung nhìn và về cơ bản phá vỡ mọi thứ. các yếu tố cố định di chuyển, những thứ không nên cuộn cuộn, v.v.

— billynoah

16

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

— Nate Barr
nguồn

2

Giải pháp tốt nhất có thể hiện có. Bạn chỉ cần chuyển đổi lớp "overlayed" cho phần thân và áp dụng kiểu ở trên cho phần thân bằng className đó.

— Sviatoslav Zalishchuk

3

Vui lòng giải thích thêm câu trả lời này. Tôi không hiểu nhận xét của Sviatoslav.

— Lonnie tốt nhất

1

Trước hết, tôi nghĩ rằng bạn đã hiểu sai khung nhìn là gì. Khung nhìn là khu vực trình duyệt sử dụng để hiển thị các trang web và bạn không thể xây dựng các trang web của mình để ghi đè khu vực này theo bất kỳ cách nào.

Thứ hai, có vẻ như lý do mà overlay-div của bạn sẽ không bao phủ toàn bộ khung nhìn là bởi vì bạn phải loại bỏ tất cả lợi nhuận trên BODY và HTML.

Hãy thử thêm phần này vào đầu biểu định kiểu của bạn - nó đặt lại tất cả các lề và phần đệm trên tất cả các phần tử. Giúp phát triển hơn nữa dễ dàng hơn:

* { margin: 0; padding: 0; }

Chỉnh sửa: Tôi chỉ hiểu câu hỏi của bạn tốt hơn. Position: fixed; có thể sẽ giải quyết được cho bạn, như Jonathan Sampson đã viết.

— Arve Systad
nguồn

1

Bạn không nên xóa phần đệm và lề khỏi mọi thứ . Có thể thực sự tốn công sức để lấy lại những thứ đó cho nhiều yếu tố như nút và đầu vào biểu mẫu.

— Sampson

1

Theo ý kiến của tôi, đó chỉ là một cách thực sự dễ dàng để coi mọi thứ giống nhau hơn trên các trình duyệt. Ngày nay có thể không áp dụng nhiều như trước đây khi thích ứng với IE5, nhưng tôi vẫn làm nó như một trong những điều đầu tiên tôi viết trong biểu định kiểu.

— Arve Systad

3

@Arve Nó giúp bạn gần, nhưng tốt hơn là sử dụng trang đặt lại đã được kiểm tra thời gian để thay thế. Hãy xem meyerweb.com/eric/tools/css/reset để biết thêm thông tin - bạn sẽ thích nó, tôi đảm bảo với bạn :)

— Sampson

Tôi đã nhìn thấy nó và tôi chỉ đơn giản nghĩ rằng nó quá lớn :)

— Arve Systad

1

@Arve Việc đặt lại không quá lớn - hãy thử khôi phục hoàn toàn từ đó *{}và bạn sẽ thấy nhiều hơn thế :)

— Sampson

0

Tôi đã gặp một chút rắc rối vì tôi không muốn SỬA lớp phủ tại chỗ vì tôi muốn thông tin bên trong lớp phủ có thể cuộn qua văn bản. Tôi đã sử dụng:

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

Tất nhiên div ở giữa cần một số nội dung và có thể là một nền xám trong suốt nhưng tôi chắc chắn rằng bạn sẽ hiểu được ý chính!

— Benjamin Vaughan
nguồn

-6

Tôi đã xem câu trả lời của Nate Barr ở trên, mà bạn có vẻ thích. Nó có vẻ không khác lắm so với đơn giản hơn

html {background-color: grey}

— Justin Munce
nguồn