Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Cần giúp đỡ về CSS background đa lớp

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi Azenis Bm, 21/5/13.

Lượt xem: 4,168

Trang 1 của 2

  1. Azenis Bm Thành viên cấp 1

    mình mới nhập môn design web được 1 thời gian ngắn nên rất gà :D... cụ tỉ thế này....
    đây là 3 lớp background cho web của mình:

    [​IMG]

    Lớp trên cùng: là phong cảnh bên trên.
    Lớp giữa: là dòng sông từ đoạn cái cầu trở xuống.
    Lớp dưới: là nền đất màu nâu.

    Mình định làm 3 lớp background để diễn tả dòng sông chảy theo khi cuộn trình duyệt xuống.... cụ thể là cho lớp 1 và lớp 3 cố định... còn lớp 2 chạy theo trình duyệt khi cuộn.

    HTML:
    <body>
    <div id="background">
    <div class="background3"></div>
    <div class="background2"></div>
    <div class="background1"></div>
    </div>
    ......

    CSS:

    #background {
    position: relative;
    }
    .background1 {
    position: absolute;
    background-image: url(images/Background%201.png);
    background-repeat: no-repeat;
    background-position: top center;
    width: 2000px;
    height: 4000px;
    z-index: -3;
    }
    .background2 {
    position: fixed;
    background-image: url(images/Background%202.png);
    background-repeat: no-repeat;
    background-position: top center;
    width: 2000px;
    height: 4000px;
    z-index: -2;
    }
    .background3 {
    position: absolute;
    background-image: url(images/Background%203.png);
    background-repeat: no-repeat;
    background-position: top center;
    width: 2000px;
    height: 4000px;
    z-index: -1;

    kết quả là cái background 3 lớp nó hiện từ trái sang phải cả cái back ground dài 2000px, mình muốn nó phải đặt vào giữa và k xuất hiện thanh cuộn ngang..... như thế này

    [​IMG]

    ảnh lỗi của nó hiện giờ đây @@:

    [​IMG]

    [​IMG]

    Edit thêm là mình đã thử sửa width: nhưng background nó bị khuyết hẳn đi về bên phải...... còn khi xóa thuộc tính width đi thì background nó trắng tinh @@

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    Azenis Bm, 21/5/13
    #1
  2. hieuunghoa

    hieuunghoa Thành viên cấp 2

    ẹc :((
    hieuunghoa, 21/5/13
    #2
    Azenis Bm thích bài viết này
  3. Azenis Bm

    Azenis Bm Thành viên cấp 1

    ý bạn là sao @@... ai giúp với huhu... mấy ngày nay mò mãi k cách nào sửa dc hix T.T
    Azenis Bm, 21/5/13
    #3
  4. việt ptit

    việt ptit Thành viên cấp 3

    bạn có thể gói gém html, ảnh, css vào 1 file nén và gửi cho mình xem được không, mình cũng đang học về web hi vọng có thể giúp bạn :D
    việt ptit, 21/5/13
    #4
    hieuunghoa và Azenis Bm thích bài viết này.
  5. Azenis Bm

    Azenis Bm Thành viên cấp 1

    cái này là đề tài đem dự thi nên phải giữ bí mật quân sự :D...... mình còn chả dc học về web cơ @@.. tự mò trên mạng thôi..... code mình cũng ghi trên kia r.... bạn giúp mình với @@
    Azenis Bm, 21/5/13
    #5
  6. Shinigamj

    Shinigamj Thành viên cấp 1

    Thế cho hỏi cái nhá : 3 cái hình background của bác có width là 2000px ah.
    Bác xét width 2000px như dzị thì có scroll là đúng rồi . Màn hình bác ko đủ 200px thì nó có scroll
    Shinigamj, 21/5/13
    #6
    Azenis Bm thích bài viết này
  7. Azenis Bm

    Azenis Bm Thành viên cấp 1

    biết là vậy... nhưng khi mình xóa width: 2000px đi thì cả 3 lớp background nó trắng tinh bạn à @@... chả hiểu sao luôn... được cái là các thành phần khác nó đã về như cũ @@
    Azenis Bm, 21/5/13
    #7
  8. việt ptit

    việt ptit Thành viên cấp 3

    thử không dùng theo px mà dùng theo % xem nào
    ví dụ: width: 100%
    việt ptit, 21/5/13
    #8
    Azenis Bm thích bài viết này
  9. Đoilơ ViệtDesigner

    Đoilơ ViệtDesigner Thành viên cấp 5

    cho xin mấy file ảnh background về test đi.
    mấy cái này mình cũng gà như bò, bạn thử thay thông số vào background-position: xem
    ví dụ background-position: 100px 100px;

    banbaonylong
    Đoilơ ViệtDesigner, 21/5/13
    #9
    Azenis Bm thích bài viết này
  10. banbaonylong

    banbaonylong Ko phải assmin

    để relative hết thử xem
    banbaonylong, 21/5/13
    #10
    Azenis Bm thích bài viết này
  11. Azenis Bm

    Azenis Bm Thành viên cấp 1

    tks bạn Việt nhé :D.... cái 100% của bác work 90% =)).... nó bị mất cái back ground lớp dưới cùng... @@... nhưng thôi .... mình sẽ gộp nó vào lớp thứ 2 luôn :D tks nhiều nhièu
    Azenis Bm, 21/5/13
    #11
  12. Azenis Bm

    Azenis Bm Thành viên cấp 1

    tks mọi ng` nhiều nhóe :D
    Azenis Bm, 21/5/13
    #12
  13. việt ptit

    việt ptit Thành viên cấp 3

    bạn có xài thêm chức năng kiểm tra phần tử của trình duyệt không, xài quen cái đấy sẽ đỡ tốn thời gian và hiệu quả hơn nhiều khi sửa code css đấy :D
    việt ptit, 21/5/13
    #13
    Azenis Bm và Đoilơ ViệtDesigner thích bài viết này.
  14. Azenis Bm

    Azenis Bm Thành viên cấp 1

    là ntn vậy bạn??? nói rõ tý dc k :D
    Azenis Bm, 21/5/13
    #14
  15. Đoilơ ViệtDesigner

    Đoilơ ViệtDesigner Thành viên cấp 5

    Đoilơ ViệtDesigner, 21/5/13
    #15
  16. banbaonylong

    banbaonylong Ko phải assmin

    LOL, web designer thì xài Firefox với bộ công cụ có sẵn cho Developer

    Chrome mô phỏng ko hết tính năng
    banbaonylong, 21/5/13
    #16
  17. Đoilơ ViệtDesigner

    Đoilơ ViệtDesigner Thành viên cấp 5

    iem chỉ biết mỗi cái đấy, đang gà phải mò dần, có phải web designer đâu =..=
    Đoilơ ViệtDesigner, 21/5/13
    #17
  18. việt ptit

    việt ptit Thành viên cấp 3

    cái mình nói đâu có hoành tráng vậy đâu, chỉ là kích chuột phải chọn "kiểm tra phần tử" hoặc "inspect element" xong màn hình trình duyệt sẽ mở ra cửa sổ code của giao diện, bên trái sẽ là html bên phải là css (mình có thể chỉnh sửa trực tiếp trên đó nhưng f5 sẽ mất vì chỉnh sửa đấy chỉ là tạm thời thôi còn muốn chỉnh sửa thật sự thì phải vào code) phần bên phải là css đó nó sẽ ghi cho mình cả file css và dòng thứ bao nhiêu của các thuộc tính mình đặt vào trong css nhờ đấy mà có thể dễ dàng hơn trong việc sửa code css, mình thường làm theo tuần tự:
    - kích chuột phải kiểm tra phần tử (muốn kiểm tra chỗ nào trên giao diện web thì kích chuột phải vào đó)
    - trình duyệt mở ra thêm phần chỉnh sửa mình sẽ dò code css bên tay phải và chỉnh sửa sao cho đúng ý, sau đó xem cái code đó trong file css nào và dòng bao nhiêu thì vào đó mà sửa
    việt ptit, 22/5/13
    #18
    Azenis Bm thích bài viết này
  19. việt ptit

    việt ptit Thành viên cấp 3

    hình như một số người gọi cái này là firebug thì phải k biết có đúng k, mình toàn gọi là kiểm tra phần tử thôi :D
    việt ptit, 22/5/13
    #19
  20. việt ptit

    việt ptit Thành viên cấp 3

    Đoilơ ViệtDesigner: cái bạn đưa khá giống cái mình nói nhưng mà sao phải cài đặt thêm làm gì khi mà trình duyệt nó có sẵn rồi :D
    việt ptit, 22/5/13
    #20
Trang 1 của 2
Từ khóa:

Ủng hộ diễn đàn