Một cách tốt để hiển thị hình ảnh nền lớn trên css

Tôi hỏi một số question về mã này và mọi người thực sự hữu ích, vì vậy tôi đã chọn câu trả lời dễ dàng hơn, mặc dù tôi không giải quyết được vấn đề của mình .Một cách tốt để hiển thị hình ảnh nền lớn trên css

Tôi đang cố gắng tạo nền css lớn giống như livingsocial.
Tôi có một hình ảnh đó là 1400 x 1050
độ phân giải hiện tại của tôi là: 1280 x 1024
Hình ảnh của tôi vẫn tiếp tục bị cắt đứt từ đáy

Câu hỏi (s): Whats cách tốt nhất để hiển thị hình nền lớn bằng css?

Tôi có cần phải có cùng một hình nền ở 4 độ phân giải khác nhau và sau đó sử dụng hình ảnh phù hợp nhất với người dùng giải pháp hiện tại đang sử dụng (có một số tập lệnh cho nó) không?
Tôi chỉ cần một hình ảnh lớn mà tôi tiếp tục mở rộng bằng css
Làm cách nào để giải quyết vấn đề này?

Tôi muốn biết cách tốt nhất để làm điều này sao cho nó hoạt động tốt trong tất cả các độ phân giải trong ba tùy chọn ở trên.

Nguồn

2011-08-16 yogashi

Nói chung bạn sẽ có các phần của nền độc đáo nhưng đảm bảo rằng các cạnh liền mạch sao cho độ phân giải không phải là vấn đề. Để kiểm tra xem thiết kế của bạn có hoạt động thu nhỏ trang hay không. –

Một hình ảnh có kích thước 1400x1050 khi được chia tỷ lệ đến 1280 sẽ cao 960. Đó là những gì bạn đang nhìn thấy? – James

Tôi không biết ... nhưng nó đang bị cắt ở phía dưới. Tôi chưa thu nhỏ nó. – yogashi

Giải pháp CSS3 Bạn có thể sử dụng background-origin và background-size trong CSS3, nhưng nó không được hỗ trợ bởi IE8 và thấp hơn.

Giải pháp PHP Bạn có thể GD2 để chia tỷ lệ hình ảnh cụ thể cho trình duyệt của người dùng, giải pháp này cũng sẽ liên quan đến JavaScript.

Cách sống xã hội Chúng đang chèn hình ảnh với thẻ <img/> và định vị thẻ đó đã được sửa.

<style type="text/css"> 
#background { 
    z-index: -1; /* put it under everything*/ 
    position: fixed; /* make it stay in the same place, regardless of scrolling */ 
    top: 0; 
    left: 0; 
    overflow: hidden; /* clip the image */ 
    width: 100%; /* fill the full width of browser */ 
    min-height: 950px; /* show at least this much of the image */ 
} 
#background img { 
    width: 100%; 
} 
</style> 

<body> 
    <div id="background"><img /></div> 
    <div id="content"><!-- Your Content Here --></div> 
</body>

Living xã hội có một số mã khác áp dụng cho thẻ <img/> của họ, nhưng có vẻ như loại dư thừa, có lẽ đó là sự hỗ trợ qua trình duyệt tốt hơn, tôi không thấy nó ở đây.

Nguồn

2011-08-16 17:13:15

cảm ơn vì đã giải thích CSS. Tuy nhiên, cố gắng kỹ thuật của họ hình ảnh của tôi bị cắt từ phía dưới: http://jsbin.com/opokev/28 Nó có thể là trường hợp vì 'overflow: hidden' nhưng những gì nên được giải quyết của tôi? tôi có nên giảm tỷ lệ hình ảnh của mình để nó không bị cắt không? – yogashi

'tràn: ẩn' là nguyên nhân khiến nó bị cắt, cũng như' vị trí: cố định' ý tưởng là nền chỉ chiếm nhiều không gian như nó cần, không hơn không kém, đây là những gì Living Social là đang làm. –

Đây là mã của bạn được sửa đổi, sử dụng ví dụ của tôi từ câu trả lời mới của tôi. http://jsbin.com/opokev/33 –

Hãy thử chỉ định chiều rộng và chiều cao img, sau đó nếu nó được cắt ở hai bên giữa hình ảnh. Nếu không, hình ảnh của bạn sẽ bị cắt tùy thuộc vào kích thước màn hình; Hoặc kéo dài ra, nếu bạn đặt kích thước của nó để phù hợp với kích thước màn hình.

Nguồn

2011-08-16 17:01:32

CSS "nền" không cho phép bạn chỉ định kích thước chia tỷ lệ cho hình ảnh. http://www.w3schools.com/css/css_background.asp –

Chính xác. Anh ta đã phải thực sự sử dụng HTML cho điều đó. –

Để chính xác hơn, CSS2 không cho phép bạn làm điều đó, CSS3 thực hiện. CSS3 được hỗ trợ bởi tất cả các trình duyệt chính, bao gồm IE9. Không hỗ trợ cho IE8 và theo mặc dù. –

Google: hình nền css AutoSize http://css-tricks.com/3458-perfect-full-page-background-image/

Nguồn

2011-08-16 17:19:02

Tôi không nhận thức được một phương pháp CSS mà sẽ đạt được nền crossbrowser .. mà thực sự hoạt động trong các phiên bản ie thấp hơn.

Tuy nhiên có một số plugin jquery trên mạng, như thế này:

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

Nguồn

2011-08-16 17:48:52 Joonas

tôi quyết định trả lời câu hỏi này một lần nữa, được đưa ra các thiết lập khác nhau của yêu cầu này, cả hai đều là hợp lệ; tuy nhiên, điều này đặc biệt giải quyết nếu bạn KHÔNG muốn hình ảnh bị cắt ở dưới cùng.

DEMO:http://wecodesign.com/demos/stackoverflow-7082174.htm

<style type="text/css"> 
#background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1;  
} 
#contentContainer { 
    position: relative; 
    width: 500px; 
    height: 500px; 
} 
#theContent { 
    /* this is all pretty much just to make it look good, nothing important in here */ 
    position: absolute; 
    top: 200px; 
    left: 200px; 
    background: #FFF; 
    width: 80px; 
    height: 80px; 
    opacity: 0.7; 
    border-radius: 6px; 
    padding: 10px; 
} 
</style> 

<div id="contentContainer"> 
    <img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" /> 
    <div id="theContent">This is the content</div> 
</div>

Nguồn

2011-08-16 18:13:28

Tôi chỉ tước mã từ sống xã hội và nghĩ rằng nó sẽ có ích nếu tôi đặt nó ở đây:

<div id="landing-page-container"> 
    <div id="background-container"> 
    <div> 
     <img alt="background" id="background" src="files/background.jpg"> 

    </div> 
    </div> 

</div> 
<div class="container"></div>

và đây là css của bạn:

html {width: 100%; height: 100%} 
body {width: 100%; height: 100%} 
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1} 
#background-container {width: 100%; height: 100%; position: absolute} 
#background {width: 100%; height: auto; z-index: -100}

và tất nhiên bạn cần cung cấp background.jpg

Nguồn

2011-12-27 20:46:21 iMad

Một cách tốt để hiển thị hình ảnh nền lớn trên css

Trả lời

Các vấn đề liên quan