Kéo dài và mở rộng nền CSS

Có cách nào để có được một nền tảng trong CSS để kéo dài hoặc mở rộng để lấp đầy vùng chứa của nó không?

Đối với các trình duyệt hiện đại, bạn có thể thực hiện điều này bằng cách sử dụng background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover có nghĩa là kéo dài hình ảnh theo chiều dọc hoặc chiều ngang để nó không bao giờ bị gạch / lặp lại.

Điều đó sẽ hoạt động cho Safari 3 (hoặc mới hơn), Chrome, Opera 10+, Firefox 3.6+ và Internet Explorer 9 (hoặc mới hơn).

Để nó hoạt động với các phiên bản thấp hơn của Internet Explorer, hãy thử các CSS sau:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Sử dụng CSS 3 bất động sản background-size:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Điều này có sẵn cho các trình duyệt hiện đại, kể từ năm 2012.

Thu nhỏ hình ảnh bằng CSS là không hoàn toàn có thể, nhưng một hiệu ứng tương tự có thể đạt được theo cách sau, mặc dù.

Sử dụng đánh dấu này:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

với CSS sau:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

và bạn nên được thực hiện!

Để chia tỷ lệ hình ảnh thành "toàn màn hình" và duy trì tỷ lệ khung hình, bạn có thể thực hiện việc này thay thế:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

Nó hoạt động khá độc đáo! Tuy nhiên, nếu một chiều bị cắt, nó sẽ bị cắt chỉ ở một bên của hình ảnh, thay vì được cắt đều ở cả hai bên (và ở giữa). Tôi đã thử nghiệm nó trong Firefox, Webkit và Internet Explorer 8.

Sử dụng thuộc tính kích thước nền trong CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

EDIT: Modernizr hỗ trợ phát hiện hỗ trợ kích thước nền . Bạn có thể sử dụng một cách giải quyết JavaScript được viết để làm việc tuy nhiên bạn cần nó và tải nó một cách linh hoạt khi không có hỗ trợ. Điều này sẽ giữ cho mã có thể duy trì mà không cần dùng đến các bản hack CSS xâm nhập cho một số trình duyệt nhất định.

Cá nhân tôi sử dụng một tập lệnh để đối phó với nó bằng cách sử dụng jQuery, đó là một sự thích ứng của trình giả lập . Như hầu hết các thiết kế hiện nay tôi sử dụng %% chiều rộng cho bố cục chất lỏng trên các thiết bị, có một chút thích ứng với một trong các vòng lặp (chiếm kích thước không phải lúc nào cũng 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDIT: Bạn cũng có thể quan tâm đến jQuery CSS3 Finaliz [s] e .

Hãy thử kích thước bài viết nền . Nếu bạn sử dụng tất cả những điều sau đây, nó sẽ hoạt động trong hầu hết các trình duyệt trừ Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

Không phải hiện tại. Nó sẽ có sẵn trong CSS 3 , nhưng sẽ mất một thời gian cho đến khi nó được triển khai trong hầu hết các trình duyệt.

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Hoạt động trong:

• Safari 3+
• Chrome bất cứ điều gì +
• IE 9+
• Opera 10+ (Opera 9.5 hỗ trợ kích thước nền nhưng không phải từ khóa)
• Firefox 3.6+ (Firefox 4 hỗ trợ phiên bản tiền tố không phải của nhà cung cấp)

Ngoài ra, bạn có thể thử điều này cho một giải pháp tức là

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Tín dụng cho bài viết này của Chris Coyier http://css-tricks.com/perinf-full-page-background-image/

Trong một từ: không. Cách duy nhất để kéo dài hình ảnh là với <img>thẻ. Bạn sẽ phải sáng tạo.

Điều này đã từng đúng trong năm 2008, khi câu trả lời được viết. Ngày nay các trình duyệt hiện đại hỗ trợ background-sizegiải quyết vấn đề này. Coi chừng IE8 không hỗ trợ nó.

Xác định "độ giãn và tỷ lệ" ...

Nếu bạn đã có một định dạng bitmap, nói chung sẽ không tuyệt vời (nói bằng đồ họa) để kéo dài nó và kéo nó về. Bạn có thể sử dụng các mẫu lặp lại để tạo ảo giác về hiệu ứng tương tự. Chẳng hạn, nếu bạn có một dải màu nhạt hơn ở cuối trang, thì bạn sẽ sử dụng một hình ảnh có chiều rộng một pixel và cùng chiều cao với thùng chứa của bạn (hoặc tốt hơn là lớn hơn để tính tỷ lệ) và sau đó xếp nó ngang qua trang. Tương tự, nếu gradient chạy ngang qua trang, nó sẽ cao một pixel và rộng hơn so với vùng chứa của bạn và lặp lại xuống trang.

Thông thường để tạo ảo giác cho nó kéo dài để lấp đầy vật chứa khi vật chứa phát triển hoặc co lại, bạn làm cho hình ảnh lớn hơn vật chứa. Bất kỳ sự chồng lấp nào sẽ không được hiển thị bên ngoài giới hạn của container.

Nếu bạn muốn có một hiệu ứng dựa vào thứ gì đó giống như một cái hộp có các cạnh cong, thì bạn sẽ dán bên trái của hộp vào bên trái của hộp chứa của bạn với đủ chồng lên nhau (trong lý do) cho dù thùng chứa lớn đến đâu, nó không bao giờ chạy ra khỏi nền và sau đó bạn layer một hình ảnh bên phải của hộp với các cạnh cong và đặt nó ở bên phải của container. Do đó, khi container co lại hoặc phát triển, hiệu ứng hộp cong dường như co lại hoặc phát triển cùng với nó - thực tế không phải vậy, nhưng nó mang lại ảo tưởng rằng đó là những gì đang xảy ra.

Để thực sự làm cho hình ảnh thu nhỏ và phát triển với vùng chứa, bạn sẽ cần sử dụng một số thủ thuật xếp lớp để làm cho hình ảnh có vẻ hoạt động như một nền và một số javascript để thay đổi kích thước với vùng chứa. Không có cách nào hiện tại để làm điều này với CSS ...

Nếu bạn đang sử dụng đồ họa vector, bạn sẽ vượt ra ngoài lĩnh vực chuyên môn của mình.

Đây là những gì tôi đã làm về nó. Trong lớp kéo dài, tôi chỉ đơn giản là thay đổi chiều cao thành auto. Bằng cách này, ảnh nền của bạn luôn có cùng kích thước với chiều rộng của màn hình và chiều cao sẽ luôn có kích thước phù hợp.

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Thêm một background-attachmentdòng:

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Tôi muốn chỉ ra rằng điều này tương đương với việc làm:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

Một giải pháp tuyệt vời khác cho điều này là Backstretch của Srobbin có thể được áp dụng cho cơ thể hoặc bất kỳ yếu tố nào trên trang - http://srobbin.com/jquery-plugins/backstretch/

Thử cái này

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Một mẹo bổ sung cho cheat của SolidSmile là chia tỷ lệ (kích thước lại tỷ lệ) bằng cách đặt chiều rộng và sử dụng tự động cho chiều cao.

Ví dụ:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

Sử dụng thuộc border-image : yourimagetính để đặt hình ảnh của bạn và phóng to nó lên toàn bộ viền của màn hình hoặc cửa sổ của bạn.