Nhiều hình nền định vị

Question

Tôi có ba hình nền, tất cả chiều rộng là 643px. Tôi muốn họ được đặt ra như sau:

• hình ảnh đầu (chiều cao 12px) no-repeat

• hình ảnh giữa repeat-y

• hình ảnh dưới cùng (chiều cao 12px) không lặp lại

Tôi không thể làm điều đó mà không làm cho chúng trùng lặp (đó là một vấn đề vì hình ảnh trong suốt một phần), là một cái gì đó như thế này có thể?

background-image: url(top.png), 
        url(bottom.png), 
        url(middle.png); 

background-repeat: no-repeat, 
        no-repeat, 
        repeat-y; 

background-position: left 0 top -12px, 
        left 0 bottom -12px, 
        left 0 top 0; 

Answer 1

Vấn đề của bạn là repeat-y sẽ lấp đầy toàn bộ chiều cao, bất kể bạn định vị ban đầu ở đâu. Vì vậy, nó chồng chéo lên trên và dưới của bạn.

Một giải pháp là đẩy nền lặp lại vào phần tử giả được đặt ngoài vùng chứa theo số 12px ở trên cùng và dưới cùng. The result can be seen here (độ mờ trong bản trình diễn chỉ để cho biết rằng không có sự trùng lặp nào xảy ra). Không có độ mờ, see here. Mã liên quan (thử nghiệm trong các trình duyệt CSS3: IE9, FF, Chrome):

CSS

div { 
    position: relative; 
    z-index: 2; 
    background: url(top.png) top left no-repeat, 
       url(bottom.png) bottom left no-repeat; 
} 

div:before { 
    content: ''; 
    position: absolute; 
    z-index: -1; /* push it to the background */ 
    top: 12px; /* position it off the top background */ 
    right: 0; 
    bottom: 12px; /* position it off the bottom background */ 
    left: 0; 
    background: url(middle.png) top left repeat-y; 
} 

Nếu bạn cần hoặc muốn hỗ trợ IE8 (mà không hỗ trợ nhiều nền), sau đó bạn có thể đặt nền trên cùng trong div chính và đặt nền dưới cùng bằng cách sử dụng phần tử giả div:after được đặt ở dưới cùng của vùng chứa.

Answer 2

Hãy thử làm điều đó như thế này:

background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat; 
    } 

EDIT: chỉ là một ví dụ, nhưng đây là css với css của bạn:

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat; 
     } 

Answer 3

Nếu bạn có thể thêm padding/biên giới với khối tương đương với nền bạn muốn vị trí mà không chồng chéo khối khác, bạn có thể sử dụng background-clip & background-origin đến vị trí các hình nền trên và dưới so với miếng đệm/biên giới, và lặp đi lặp lại nền trên nội dung/trang đệm + nội dung.

Dưới đây là một ví dụ: http://dabblet.com/gist/2668803

Đối với mã của bạn, bạn sẽ có thể cần thêm một cái gì đó như thế này:

padding: 12px 0; 
background-clip: padding-box, padding-box, content-box; 
background-origin: padding-box, padding-box, content-box; 

hoặc

border: solid transparent; 
border-width: 12px 0; 
background-clip: border-box, border-box, padding-box; 
background-origin: border-box, border-box, padding-box; 

Và bạn sẽ có được những gì bạn cần.Nếu bạn không thể có được các paddings/border, phần tử giả như ScottS được đề cập sẽ hoạt động hoàn hảo.

Answer 4

Dưới đây là một phương pháp có sử dụng 3 div cho mỗi Lên trên, Trung và dưới hình ảnh được minh bạch để áp dụng cho trang web của bạn.

Hình nền là tùy chọn.

Được thử nghiệm trong các trình duyệt hiện đại và thân thiện với IE8.

Phương pháp này cho phép bạn điều trị các yếu tốcơ thể vì nó cần được điều trị, nghĩa là, đánh dấu trang web của bạn không không cần phải được trong một wrapper hoặc thành phần chứa.

jsFiddle Example
jsFiddle Example with centered filled

Từ ví dụ trên sử dụng nội dung giữ chỗ hình ảnh đó là không có sự minh bạch cho Top và hình ảnh dưới, bạn có thể xác minh đánh dấu việc với tính minh bạch với jsFiddle này có sử dụng các biểu tượng nhỏ trong suốt trong chế độ lặp lại HERE.

Answer 5

Cách duy nhất (thực tế, không đe dọa tóc) là làm điều đó trong Javascript, khi trang đã được tải và khi được thay đổi kích cỡ, với canvas có kích thước vừa với innerHeight và 3 hình ảnh: vẽ cái đầu tiên một lần ở trên cùng, vẽ thứ hai nhiều lần theo yêu cầu để che phần còn lại của canvas và vẽ phần thứ ba ở cuối canvas. Định vị canvas ở mức 0,0 với chỉ số z âm cực kỳ.

Tôi đã đi vào nó với 3 hình ảnh (643 x 12, 100 và 12) và tất nhiên vấn đề đầu tiên tôi thấy là hình ảnh thứ 3 được vẽ trên một phần của lần lặp cuối cùng của hình ảnh thứ 2 - trừ khi bạn có chiều cao cửa sổ chính xác là 12 + 12 + (p2.height * X), ​​bạn sẽ có một số trùng lặp. Nhưng đó là mong đợi, phải không?

Answer 6

Tôi nghĩ rằng z-index sẽ khắc phục điều này vì z-index chỉ ảnh hưởng đến các yếu tố của CON, có nghĩa là bạn không thể làm hỏng bất cứ điều gì khác trên trang sử dụng z-index.

đầu và hình ảnh dưới z-index:3;

hình ảnh giữa z-index:2;background-repeat:repeat-y;

Answer 7

Tôi thực sự tìm thấy một sửa chữa đơn giản, bởi vì tôi đã có vấn đề này cùng với một hướng ngang.

Thay vì thêm mã như các câu trả lời khác, bạn chỉ cần liệt kê nó một cách khác nhau trong CSS của bạn. Hình ảnh trung tâm lặp lại cần được liệt kê cuối cùng, không phải đầu tiên hoặc thứ hai.

Trong mã của tôi nó trông như thế này:

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif); 
background-position: left, right, center; 
background-repeat: no-repeat, no-repeat, repeat-x; 

Answer 8

Một cách triệt để nhưng hiệu quả để đối phó với điều này, nếu:

1. bạn muốn áp dụng hình nền với không chồng chéo với một ": trước "
2. sự ": trước khi" yếu tố như chiều cao tối đa tiếng

---

&:before { 
    background: url('vertical-line.png') no-repeat 0px, 
       url('vertical-line-repeat.png') no-repeat 140px, 
       url('vertical-line-repeat.png') no-repeat 200px, 
       url('vertical-line-repeat.png') no-repeat 260px, 
       url('vertical-line-repeat.png') no-repeat 320px, 
       url('vertical-line-repeat.png') no-repeat 380px, 
       url('vertical-line-repeat.png') no-repeat 440px, 
       url('vertical-line-repeat.png') no-repeat 500px, 
       url('vertical-line-repeat.png') no-repeat 560px, 
       url('vertical-line-repeat.png') no-repeat 620px, 
       url('vertical-line-repeat.png') no-repeat 680px, 
       url('vertical-line-repeat.png') no-repeat 740px; 
}