Kéo dài và chia tỷ lệ hình ảnh CSS trong nền - chỉ với CSS

853

Tôi muốn rằng độ rộng và tỷ lệ hình ảnh nền của tôi tùy thuộc vào kích thước khung nhìn trình duyệt.

Tôi đã thấy một số câu hỏi về Stack Overflow thực hiện công việc, chẳng hạn như Stretch và chia tỷ lệ nền CSS chẳng hạn. Nó hoạt động tốt, nhưng tôi muốn đặt hình ảnh bằng cách sử dụng background, không phải với một imgthẻ.

Trong đó một imgthẻ được đặt, và sau đó với CSS, chúng tôi vinh danh imgthẻ đó.

width:100%; height:100%;

Nó hoạt động, nhưng câu hỏi đó hơi cũ và nói rằng trong CSS 3 thay đổi kích thước một hình nền sẽ hoạt động khá tốt. Tôi đã thử ví dụ này lần đầu tiên , nhưng nó không thành công với tôi.

Có một phương pháp tốt để làm điều đó với background-imagekhai báo?

css  background 
— Fábio Antunes
nguồn
113
kích thước nền: 100% 100%;
— Andreas L.
5
Có lẽ bản demo này có thể hữu ích: w3schools.com/cssref/ Kẻ
— Davide
1
— Alex Angas
@AlexAngas Không nên tuổi của câu hỏi là một yếu tố? Câu hỏi này đã được hỏi 6 năm trước và câu hỏi bạn chỉ ra đã được hỏi 4 năm trước.
— Fábio Antunes
@ FábioAntunes IMHO chúng tôi sẽ không muốn đóng câu hỏi với câu trả lời hay nhất và thay vào đó khuyến khích các bản sao liên kết với nó. Tôi chắc chắn điều này đã được thảo luận trên Meta nhưng tôi không thể tìm thấy ngay bây giờ ...
— Alex Angas

Câu trả lời:

1047

CSS3 có một thuộc tính nhỏ được gọi là background-size:cover.

Điều này chia tỷ lệ hình ảnh để khu vực nền được bao phủ hoàn toàn bởi hình nền trong khi vẫn duy trì tỷ lệ khung hình. Toàn bộ khu vực sẽ được bảo hiểm. Tuy nhiên, một phần của hình ảnh có thể không hiển thị nếu chiều rộng / chiều cao của hình ảnh đã thay đổi kích thước quá lớn.

— Vashishtha Jogi
nguồn
11
Che phủ hình ảnh nếu tỷ lệ khung hình không khớp, vì vậy đó không phải là một giải pháp chung tốt.
— mahemoff
1
trong trường hợp bạn muốn nó hoạt động trong trình duyệt IE - github.com/louisremi/background-size-polyfill
— Wreeecks
4
Nó dường như không hoạt động trên Firefox. Tuy nhiên, background-size: 100vw 100vh;thủ thuật độc đáo.
— Yannick Mauray
5
@YannickMauray thử: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
Nếu bạn muốn cái này, nhưng chỉ cho trục ngang, hãy sử dụng cái này: background-size: 100% auto; stackoverflow.com/questions/41025630/ Lời
— antoineMoPa
470

Bạn có thể sử dụng thuộc tính CSS3 để làm điều đó khá độc đáo. Nó thay đổi kích thước theo tỷ lệ để không làm biến dạng hình ảnh (mặc dù nó nâng cấp hình ảnh nhỏ). Chỉ cần lưu ý, nó chưa được thực hiện trong tất cả các trình duyệt.

background-size: 100%;
— Matt Burgess
nguồn
19
@nXqd Đó là khá nhiều mã đầy đủ! Tạo một container với một background-imagevà bao gồm các tài sản ở trên. Như đã đề cập, hỗ trợ trình duyệt chưa tốt và có các phiên bản cụ thể của trình duyệt này. -webkit-background-sizev.v ... Xem Mô-đun W3C CSS3: kích thước nền và css3.info: kích thước nền
— MrWhite
15
Để duy trì tỷ lệ khung hình của hình ảnh, bạn nên sử dụng "kích thước nền: bìa;" hoặc "kích thước nền: chứa;". Tôi đã xây dựng một polyfill thực hiện các giá trị đó trong IE8: github.com/louisremi/background-size-polyfill
— Louis-Rémi
4
Bạn cũng nên thêm autođể duy trì tỷ lệ khung hình.
— Chibueze Opata
186

Sử dụng mã tôi đã đề cập ...

HTML

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

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

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

Điều đó tạo ra hiệu ứng mong muốn: chỉ nội dung sẽ cuộn, không phải nền.

Hình nền thay đổi kích thước khung nhìn trình duyệt cho bất kỳ kích thước màn hình nào. Khi nội dung không phù hợp với chế độ xem của trình duyệt và người dùng cần cuộn trang, hình nền vẫn được cố định trong chế độ xem trong khi nội dung cuộn.

Với CSS 3 có vẻ như điều này sẽ dễ dàng hơn rất nhiều.

— Fábio Antunes
nguồn
12
Nhưng đây không phải là hình nền. Bạn chỉ có thể làm điều này với một khối, nhưng không phải là một yếu tố nội tuyến, chẳng hạn như đầu vào [type = text]. Hoặc là tôi sai?
— Deerchao
11
không cần class = "Stretch", chỉ cần sử dụng #background img {} làm định danh trong css
— BerggreenDK
chỉ số z: -1; giữ hình ảnh của bạn trong nền. Nếu bạn muốn hiển thị hình ảnh của mình ở nền trước, bạn có thể tăng giá trị chỉ mục z hoặc xóa chỉ mục đó.
— gokhanakkurt
Vấn đề tôi gặp phải là với IE8. Hình nền của DIV trải dài đầy đủ nhưng trong IE8 hình ảnh nằm ngoài DIV do đó không thể nhìn thấy hình ảnh đầy đủ. Nó được cắt ra. Đây là câu hỏi của tôi: stackoverflow.com/questions/22331179/
— Kẻ
1
Sai lầm rõ ràng mọi người mắc phải là đặt hình nền trong css (tức là bởi background : url("example.png");) và sau đó sử dụng thuộc tính css background-size:100%;bên dưới nó để hy vọng tỷ lệ hình ảnh theo chiều rộng màn hình. Điều này sẽ không hoạt động, phải không? Nếu bạn muốn đặt một hình ảnh nền cho cơ thể thì một thuộc tính hình ảnh nên được thêm vào thẻ cơ thể như thế nào <body background="example.png">. Sau đó sử dụng css background-size:100%;để mở rộng nó.
— sjsam
166

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
— Josh Crozier
nguồn
Tuy nhiên, điều này không hoạt động trong IE8. Nó tạo ra một lề trên cùng và dưới cùng của cửa sổ.
— erdomester
Trên Android, nó hoạt động khi sử dụng html, body {...}thay vì body {...}.
— Edward
53 
background-size: 100% 100%;

kéo dài nền để lấp đầy toàn bộ phần tử trên cả hai trục.

— vâng
nguồn
40

Phần CSS sau sẽ kéo dài hình ảnh với tất cả các trình duyệt.

Tôi làm điều này một cách linh hoạt cho mỗi trang. Do đó, tôi sử dụng PHP để tạo thẻ HTML riêng cho mỗi trang. Tất cả các hình ảnh đều nằm trong thư mục 'hình ảnh' và kết thúc bằng 'Bg.jpg'.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Nếu bạn chỉ có một hình nền cho tất cả các trang thì bạn có thể xóa $picbiến đó, loại bỏ thoát dấu gạch chéo ngược, điều chỉnh đường dẫn và đặt mã này vào tệp CSS của bạn.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Điều này đã được thử nghiệm với Internet Explorer 9, Chrome 21 và Firefox 14.

— Thorie Niehues
nguồn
2
Ví dụ của bạn không hoạt động theo nghĩa tương thích ngược, vì bạn đơn giản quên mất tiền tố '-' hàng đầu của nhà cung cấp. Nó phải được -webkit-background-size, -moz-background-sizevà như vậy. Xem developer.mozilla.org/en-US/docs/CSS/NH Hoặc bạn muốn đưa nó vào bằng chứng trong tương lai trong tài sản tốc ký nhưbackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— Volker E.
Đây là giải pháp duy nhất phù hợp với tôi trên IE9. Cảm ơn.
— cướp
17

Bạn thực sự có thể đạt được hiệu ứng tương tự như ảnh nền với thẻ img. Bạn chỉ cần đặt chỉ số z của nó thấp hơn mọi thứ khác, đặt vị trí: tuyệt đối và sử dụng nền trong suốt cho mỗi hộp ở phía trước.

— Kim Stebel
nguồn
Đó là những gì tôi thấy trong các câu hỏi SO khác, và hoạt động, nhưng kể từ khi CSS3 xuất hiện, tôi nghĩ rằng bây giờ là một cách tốt hơn cho nó.
— Fábio Antunes
3
Có thể có và tính đến sự phát triển tài khoản trong việc sử dụng trình duyệt, bạn có thể sử dụng chúng một cách thương mại chỉ trong ... 10 năm?
— Kim Stebel
Là CSS3, không có gì sai khi sử dụng một thuộc tính mà các trình duyệt hiện đại nhất nhìn thấy và đưa ra một tiêu chuẩn tối thiểu cho các trình duyệt không được hỗ trợ. Ví dụ, ở đây, bạn có thể sử dụng nền lát gạch nhàm chán nhưng có thể chấp nhận được cho <IE8 và một hình ảnh đáng yêu cho Firefox / Chrome / Safari / Opera. Ngoài ra, có nhiều polyfill để sao chép chức năng CSS3 trong các trình duyệt cũ hơn bằng JavaScript. Nói cách khác, bạn không cần đợi mọi trình duyệt hỗ trợ CSS3 để sử dụng nó.
— Dan thổi vào
Chỉ tìm thấy bài đăng khác này tham khảo việc sử dụng MS AlphaImageLoader độc quyền: stackoverflow.com/questions/2991623/ chủ
— uglymunky
17

Sử dụng CSS này:

background: url('img.png') no-repeat; 
background-size: 100%;
— RSH1
nguồn
15

Nó được giải thích bằng các thủ thuật CSS: Hình ảnh nền toàn trang hoàn hảo

Bản trình diễn: https://css-tricks.com/examples/FullPageBackgroundImage/proTHERive.php

Mã số:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— Aamer Shahzad
nguồn
Dựa trên câu trả lời ở trên, tôi đã thấy sửa lỗi đính kèm nền không hoạt động trên các thiết bị di động và microsoft edge. Giải pháp hoàn hảo để kéo dài nền và sửa lỗi trên tất cả các thiết bị và trình duyệt tôi khuyên dùng jquery-backstretch.com
— Aamer Shahzad
15

Bạn có thể thêm lớp này vào tệp CSS của bạn.

.stretch {
    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;
}

Nó hoạt động trong:

  • Safari 3 trở lên
  • Chrome dù thế nào hay sau này
  • Internet Explorer 9 trở lên
  • Opera 10 trở lên (hỗ trợ Opera 9.5 background-size, nhưng không phải từ khóa)
  • Firefox 3.6 trở lên (Firefox 4 hỗ trợ phiên bản tiền tố không phải của nhà cung cấp)
— Arunraj S
nguồn
Đây là một câu trả lời "kéo dài để phù hợp". Lưu ý: tỷ lệ khung hình sẽ thay đổi.
— devdrc
10

Để chia tỷ lệ hình ảnh của bạn một cách thích hợp dựa trên kích thước thùng chứa, hãy sử dụng như sau:

background-size: contain;
background-repeat: no-repeat;
— justinpees
nguồn
9

Tôi sử dụng cái này và nó hoạt động với tất cả các trình duyệt:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— Mahdi jokar
nguồn
9

Cảm ơn!

Nhưng sau đó, nó không hoạt động cho trình duyệt Google Chrome và Safari (kéo dài hoạt động, nhưng độ cao của hình ảnh chỉ là 2 mm!) , Cho đến khi ai đó nói với tôi những gì còn thiếu:

Cố gắng đặt height:auto;min-height:100%;

Vì vậy, thay đổi điều đó cho height:100%;dòng của bạn , đưa ra:

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

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

Ngay trước khi mã mới được thêm vào, tôi có mã này trong các chủ đề Drupal Tendu của mìnhstyle.css :

html, cơ thể {chiều cao: 100%;}

#page {nền: #ffffff; chiều cao: tự động! quan trọng; chiều cao: 100%; chiều cao tối thiểu: 100%; vị trí: tương đối;}

Sau đó, tôi phải tạo một khối mới trong Drupal bằng hình ảnh trong khi thêm class=stretch:

<img alt = "" class = "kéo dài" src = "pic.url" />

Chỉ cần sao chép một hình ảnh với trình chỉnh sửa trong khối Drupal đó không hoạt động; người ta phải thay đổi trình soạn thảo thành văn bản không được định dạng.

— Cybr
nguồn
8

Tôi đồng ý với hình ảnh trong div tuyệt đối với chiều rộng và chiều cao 100%. Đảm bảo rằng bạn đặt 100% chiều rộng và chiều cao cho phần thân trong CSS và đặt lề và phần đệm thành 0. Một vấn đề khác bạn sẽ tìm thấy với phương pháp này là khi chọn văn bản, vùng chọn đôi khi có thể bao gồm hình nền, điều này có tác dụng đáng tiếc là làm cho toàn bộ trang có trạng thái được chọn. Bạn có thể làm tròn điều này bằng cách sử dụng user-select:nonequy tắc CSS, như vậy:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Một lần nữa, Internet Explorer là kẻ xấu ở đây, vì nó không nhận ra tùy chọn do người dùng chọn - ngay cả bản xem trước Internet Explorer 10 cũng hỗ trợ nó, vì vậy bạn có tùy chọn sử dụng JavaScript để ngăn lựa chọn hình nền (ví dụ: http : //www.felgall.com/jstip35.htm ) hoặc sử dụng phương pháp kéo dài nền CSS 3 .

Ngoài ra, đối với SEO tôi sẽ đặt hình nền ở cuối trang, nhưng nếu hình nền mất quá nhiều thời gian để tải (nghĩa là với nền trắng ban đầu), bạn có thể di chuyển lên đầu trang.

— Myke Đen
nguồn
sau đó không sử dụng img chỉ là div với bg, nó không nên được chọn
— Jacek Pietal
7

Tôi muốn căn giữa và chia tỷ lệ hình ảnh nền, mà không kéo dài nó ra toàn bộ trang và tôi muốn tỷ lệ khung hình được duy trì. Điều này làm việc cho tôi, nhờ các biến thể được đề xuất trong các câu trả lời khác:

HÌNH ẢNH TRỰC TUYẾN: ------------------------

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

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
— AnnieDee
nguồn
5

Tôi đã sử dụng kết hợp các thuộc tính CSS nền-X để đạt được hình nền tỷ lệ lý tưởng.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Điều này làm cho nền luôn bao phủ toàn bộ cửa sổ trình duyệt và vẫn ở giữa khi thu nhỏ.

— Ryan Den-Kaat
nguồn
4

Sử dụng plugin Backstretch . Một thậm chí có thể có một số hình ảnh trượt. Nó cũng hoạt động trong các container. Cách này chẳng hạn, người ta chỉ có thể có một phần nền được phủ bằng hình ảnh nền.

Vì thậm chí tôi có thể làm cho nó hoạt động chứng tỏ nó là một plugin dễ sử dụng :).

— Daniel
nguồn
3

Nếu bạn muốn có nội dung được căn giữa theo chiều ngang, hãy sử dụng kết hợp như thế này:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Điều này sẽ trông đẹp.

— Samuel Ramzan
nguồn
1

Bạn có thể sử dụng thuộc border-image : yourimagetính để chia tỷ lệ hình ảnh lên đến viền. Ngay cả khi bạn đưa ra hình nền, hình ảnh viền sẽ được vẽ lên trên nó.

Các border-imagebất động sản là rất hữu ích nếu tấm phong cách của bạn được thực hiện ở đâu đó mà không hỗ trợ CSS 3. Nếu bạn đang sử dụng Google Chrome hoặc Firefox, sau đó tôi khuyên bạn nên background-size:coversở hữu riêng của mình.

— Natesh bhat
nguồn
0

Bạn có muốn đạt được điều này chỉ bằng cách sử dụng một hình ảnh? Bởi vì bạn thực sự có thể làm cho một số tương tự như một nền kéo dài bằng cách sử dụng hai hình ảnh. Hình ảnh PNG chẳng hạn.

Tôi đã làm điều này trước đây, và nó không khó lắm. Bên cạnh đó, tôi nghĩ rằng việc kéo dài sẽ chỉ làm hại đến chất lượng của nền. Và nếu bạn thêm một hình ảnh lớn, nó sẽ làm chậm máy tính và trình duyệt.

— MarioRicalde
nguồn
Điểm tốt. Nhưng tôi đang sử dụng jpg cho ảnh nền, shes có kích thước khoảng 1500x1000 chỉ mất ít hơn 100kb. Nhưng làm thế nào bạn làm điều đó?
— Fábio Antunes
1
Làm thế nào về việc căn giữa hình ảnh theo chiều ngang và làm mềm các cạnh hình ảnh với một màu hoặc một mẫu rắn? Điều này sẽ cho phép bạn có một sự thích ứng liền mạch nếu người dùng có nhiều hơn độ phân giải hình ảnh.
— MarioRicalde
Nhưng tôi muốn rằng hình ảnh lấp đầy nền. Một trong những câu nói của bạn, đó là những gì tôi thường làm.
— Fábio Antunes
0

Sau đây làm việc cho tôi.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

đã làm việc để bao phủ toàn bộ nền trên các kích thước khác nhau

— tony2tones
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.