2010-02-09 36 views
5

Tôi khá mới để CSS và tôi muốn biết làm thế nào có thể đạt được điều này:HTML & CSS nền

Tôi đang viết một trang sẽ hiển thị một hình thức ở giữa (Người đại diện hộp đen). Tôi muốn nó có nền màu trắng sẽ chồng chéo lên nền cơ thể (được thể hiện bằng các đường màu đỏ).

Kiểm tra trang web này để biết hình ảnh ví dụ. (Xin lỗi tôi không thể đăng nội tuyến)

http://www.freeimagehosting.net/uploads/bf2d71f238.png

Cảm ơn bạn rất nhiều!

+0

Có lẽ không phải hoan nghênh bạn đang tìm kiếm cho SO, tuy nhiên Frank có một điểm. Cộng đồng sẽ phản ứng tốt hơn rất nhiều nếu bạn không yêu cầu họ làm tất cả công việc cho bạn. Hãy thử đăng những gì bạn có cho đến nay, tuy nhiên xấu bạn có thể nghĩ rằng nó được. –

+1

+1 câu hỏi mới cho người mới bắt đầu –

+2

@Mike - Vẽ một bức tranh đẹp hơn hầu hết! Bắt đầu với những gì bạn biết không phải là một ý tưởng tồi IMO –

Trả lời

3

Bạn có thể cung cấp cho các yếu tố của bạn một vài phong cách, nền có thể màu sắc, hình ảnh, vv

CSS:

body { /* Red Lines Here */ 
    background: #990000; 
} 
#outer { /* White box Here */ 
    background: #ffffff; /* White */ 
    width: 900px; /* Total width will be 1000px once you include padding */ 
    padding: 50px; /* White border around black box, this is padding on all sides */ 
    margin: 0 auto; /* Centering it */ 
} 
#inner { /*Black Box Here */ 
    background: #000000; /* Black */  
    color: #ffffff; /* White Text so you can see it */ 
} 

Html:

<html> 
    <head> 
    <title>My Page! Step off!</title> 
    </head> 
    <body> 
    <div id="outer"> 
     <div id="inner"> 
     Content! 
     </div> 
    </div> 
    </body> 
</html> 
+0

+1 - đánh bại tôi với nó: P –

+0

Sử dụng hai div có vẻ hơi quá mức. Có gì sai với "border: 50px solid #FFF;"? – kloffy

+0

@kloffy - Nếu đó là tôi, tôi muốn một hình ảnh trong không gian đó, bắt đầu anh ta với tùy chọn đó sau :) –

0

Đọc một cuốn sách như 'CSS Mastery'. Một khi bạn biết một số vấn đề cơ bản và có thể giải thích những gì bạn đã thử và có cơ sở để đặt câu hỏi ngay từ đầu, sau đó yêu cầu trợ giúp.

+0

Tôi không đồng ý - Tôi đã học TẤT CẢ css của tôi từ thử nghiệm và đọc các bài báo trên web. Tôi không ngại cho người dùng một sự thúc đẩy nhanh chóng để có được chúng và chạy. Khi họ thấy đủ ví dụ - họ sẽ tìm ra cách các tổng quát hoạt động và thử nghiệm theo cách riêng của họ. –

+1

@Frank - tại sao phải trả lời nếu bạn viết gì là vô ích? – AlexBrand

+0

Tôi không đồng ý với việc giảm giá. Đề xuất sách sẽ thêm vào cuộc thảo luận. Bây giờ nó có thể không giúp chàng trai với câu hỏi ngay lập tức của mình, nhưng IMO ngay cả khi đây không phải là câu trả lời tốt nhất, nó có thể hữu ích nếu poster là quan tâm đến đào sâu hơn. Nhận xét duy nhất của tôi là nếu bạn định đăng một đề xuất sách, hãy đặt vào một liên kết. Và yuval: Nếu bạn chưa đọc toàn bộ cuốn sách trên CSS, rất có thể bạn đang thiếu rất nhiều hình ảnh lớn về CSS. Tôi đã cố gắng học bằng cách tự mình học hỏi trong 5 năm qua, và cuối cùng đã chọn một cuốn sách và đọc nó để che đậy. –