2 phần CSS "hình nền" thay đổi kích thước thành trình duyệt

Question

Nhà thiết kế của tôi tin rằng điều này không thể thực hiện được, tuy nhiên có vẻ như có thể với tôi. (Mặc dù tôi có kinh nghiệm CSS giới hạn). Tuy nhiên, ông cũng cho biết nền không thể được sửa chữa, và stackoverflow đã chứng minh sai của mình trong quá khứ; vì vậy tôi đặt câu hỏi về kiến ​​thức của anh ấy.

JQuery có thể được sử dụng nếu không thể thực hiện điều này trong CSS thuần túy.

Nửa trên cùng sẽ là độ dốc có độ linh hoạt đầy đủ để nghiêng trái, phải, lên, xuống mà không bị biến dạng nhiều. Nửa dưới là một hình ảnh lý tưởng cho độ phân giải 1280 x 1024 (vì đây là độ phân giải màn hình trình duyệt phổ biến nhất). Sau đó, tùy thuộc vào yêu cầu cần thiết nó sẽ phác thảo và nghiêng đến bất cứ kích thước nào nó cần. Vẫn cho phép tất cả hình ảnh được nhìn thấy.

Khẩu phần giữa nửa trên và nửa dưới luôn bằng 50% 50% độc lập với độ phân giải của trình duyệt.

Tôi cũng muốn nếu cả hai phần trên cùng và dưới cùng được cố định.

Trong một thế giới hoàn hảo (không có IE), id thích làm điều này với độ dốc css3 và nhiều hình nền trong 1 DIV. Tuy nhiên, vì IE9 chưa ra, tôi nghĩ cách tốt nhất để tiếp cận nó sẽ là 2 div trong vùng chứa DIV và sử dụng nền lặp PNG cho div đầu.

Cần lưu ý Tôi sẽ sử dụng css3pie.com cho phép một số CSS3 cho IE6-8 (nhưng Tôi không muốn dựa vào nó, trừ 100% đã được chứng minh)

Đây có phải là có thể chỉ với CSS? Bạn sẽ làm điều này như thế nào?

Nếu không thể chỉ với CSS, có cách nào tôi có thể nhận JavaScript/JQuery để hỗ trợ không? Tôi nghĩ rằng một cơ sở của 1280 x 1024 không phải là ý tưởng tốt nhất bởi vì nó dường như có một đài phát thanh lẻ.

Edit 1

Oh yeah, tôi có một WIP quá: http://meyers.ipalaces.org/extra/

Nó có vẻ tốt trong 1280 x 1024 ... bây giờ nó chỉ nhận được toàn bộ thay đổi kích thước của DIV trên xuống là 50% nên hình ảnh là 50%.

Tôi vẫn muốn TẤT CẢ nước được nhìn thấy, bởi vì tôi thích giao diện của những tảng đá ở phía dưới. Tuy nhiên, tôi mở cửa cho những ý tưởng thay thế mà không hoàn thành những gì tôi muốn 100%, nhưng đến gần.

Edit 2

Làm thế nào về việc sử dụng gradient đầu như là nền tảng CSS2 đúng và sau đó chỉ cần đặt một <img> ở dưới cùng của nó để thay đổi kích thước? Có lẽ điều đó sẽ cho phép khả năng CSS2. Tôi tham khảo một số kỹ thuật làm việc quanh đây: A list apart

Edit 3

tôi vẫn đang tìm kiếm những kết quả làm việc trên IE6 và cũng không gây Internet explorer tụt hậu. Tôi đang thiết lập một khoản tiền thưởng 50 để giúp thu hút thêm sự chú ý.

Answer 1

Tôi đã thành công đã đưa ra 2 cách để làm điều này:

Phương pháp 1

Click here to view demo

Sử dụng CSS3 background-size tôi đã có thể thiết lập 2 div yếu tố để lên nhau khác với min-height: 50% và sau đó sử dụng background-size: 100% 50% họ thực hiện thành công những gì tôi đang tìm kiếm.

Phương pháp này chỉ là một bằng chứng về khái niệm, vì IE6-8 không hỗ trợ background-size, tôi đã không theo đuổi tinh chỉnh phương pháp này một cách hoàn hảo. Như nó đứng, nó hiện đang messes lên khi bạn di chuyển mặc dù có background-attachment: fixed;. Tôi đã bỏ phương pháp này CSS3 để tìm kiếm các phương pháp tốt hơn sử dụng thủ thuật CSS ...

---

Phương pháp 2

Click here to view demo

Tiếp theo ví dụ tôi tìm thấy từ A List Apart (Article | Example1 | Example2). Tôi đã sử dụng Kỹ thuật số 2 từ Ví dụ 1 và tôi đã có thể mô phỏng những gì tôi muốn làm chỉ bằng CSS2. (Tôi không chắc chắn 100% như thế nào hay tại sao các công trình này, nhưng nó)

Bởi vì tôi cũng sẽ sử dụng để cung cấp cho CSS3PIE IE6-8 CSS3 khả năng làm linear gradients, border-radius, và box-shadow; Tôi đã chọn sử dụng gradient tuyến tính thay vì hình ảnh cho nền trên cùng.

vấn đề

• Phương pháp CSS2 từ Kỹ thuật # 2, Ví dụ 1 không làm việc với IE6 đúng
• Tạo lag quá mức trong tất cả các nhà thám hiểm Internet hiện

Answer 2

Nếu bạn muốn giữ đường chân trời của nước ở mức 50% trên màn hình của bạn, tôi sẽ đề xuất một phương pháp đơn giản hơn;

Tạo hình ảnh (có thể rộng khoảng 1280) trong Photoshop của nước ở dưới cùng và dốc lên trên cùng. Làm mờ gradient trên thành màu xanh lam nhạt (ví dụ # 68b). Làm mờ bên trái, bên phải và dưới cùng của hình ảnh vào cùng một màu (# 68b).

Đặt nền của trang của bạn như sau;

html { 
background: #68b url(waterimage.png) center center no-repeat; 
} 

Trong trường hợp của bạn, có thể bạn sẽ muốn áp dụng nền để #wdth-100 thay vì html, nhưng tất cả phụ thuộc vào yếu tố nào bạn muốn đặt nền của bạn trên.

Đã xong. Hãy cho tôi biết nếu điều đó phù hợp với bạn.

Answer 3

Tôi không có liên kết đến hình ảnh trên cùng của bạn, vì vậy tôi đã sử dụng cùng một hình ảnh cho trên cùng và dưới cùng. Có lẽ bạn nên sử dụng giải pháp CSS cho các trình duyệt thông thường và JS cho IE.

<script type='text/javascript'> 

$(document).ready(function() { 
    wh=$(window).height(); 
    ww=$(window).width(); 
    if(wh%2) { 
     h1=Math.round(wh/2); 
     h2=Math.round(wh/2)-1; 
    } else { 
     h1=h2=wh/2; 
    } 
    img1=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img1'}) 
      .css({'width':ww,'height':h1,'top':'0','left':'0','position':'absolute','z-index':'-100'}); 
    img2=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img2'}) 
      .css({'width':ww,'height':h2,'top':h1,'left':'0','position':'absolute','z-index':'-100'}); 


    $(document.body).append(img1); 
    $(document.body).append(img2); 
}); 
$(window).resize(function() { 
    wh=$(window).height(); 
    ww=$(window).width(); 
    if(wh%2) { 
     h1=Math.round(wh/2); 
     h2=Math.round(wh/2)-1; 
    } else { 
     h1=h2=wh/2; 
    } 
    $('#img1').css({'width':ww,'height':h1,'top':'0','left':'0'}); 
    $('#img2').css({'width':ww,'height':h2,'top':h1,'left':'0'}); 
}); 
</script> 

Answer 4

Câu trả lời thực tế dường như là để làm điều đó bằng nhiều divs với nền của riêng mình, tất cả trong số đó sẽ được bố trí hoàn toàn và đằng sau tất cả mọi thứ khác sử dụng z-index.

Tôi biết đó không phải là giải pháp đánh dấu sạch với một div duy nhất với một số CSS ma thuật, nhưng đây là một vấn đề phức tạp trong CSS thuần túy trong bất kỳ trình duyệt nào, và gần như chắc chắn là không thể nếu bạn cần hỗ trợ IE6.

Câu trả lời thực tế hơn nữa là nói "Tôi sẽ hỗ trợ IE6 càng nhiều càng tốt, nhưng nếu nó không hỗ trợ hiệu ứng nền đáng yêu của tôi thì đó chỉ là may mắn cho bất cứ ai vẫn sử dụng nó".

Answer 5

Thực hiện việc này bằng cách sử dụng raphaeljs. Tạo DIV nền thành canvas, vẽ rect đến 50% chiều cao của trang (nếu sử dụng jquery rồi sử dụng $(window).resize() để theo dõi kích thước cửa sổ và $(window).height() để nhận 50% thành pixel).

Bạn có thể điền thông tin vào raphealjs rect với việc xác định đó là điền giá trị cho một cái gì đó giống như fill: "90-#000000-#ffffff"

Đối với hình ảnh: Đặt hình ảnh sử dụng raphealjs' image HOẶC chỉ nhúng nó sử dụng HTML và cập nhật nó là chiều cao quy mô sử dụng jquery như đã đề cập ở trên.

Tôi đã thực hiện một cái gì đó như thế này chỉ gần đây bằng cách sử dụng khoảng 10 dòng mã.

Ngoài ra: Thay đổi water.png của bạn, khoảng 275kb, trong đó tệp lớn nhất tiếp theo trên trang của bạn (css) giống như 1.5kb.

Answer 6

Chỉ có thể thực hiện với CSS. Không cần PIE. Chỉ cần một lỗi IE6 và một số phép lọc.

Demo: http://www.bundyo.org/test/FPB.html