Làm cách nào để tạo nền tĩnh trong css?

Bộ sưu tập các ví dụ mã nền cố định HTML và CSS được chọn thủ công từ Codepen, GitHub và các tài nguyên khác. Cập nhật bộ sưu tập tháng 11 năm 2021. 9 mặt hàng mới

Những bài viết liên quan

  1. Hình nền động CSS
  2. Mẫu nền CSS
  3. Hình nền hạt CSS
  4. Hình nền tam giác CSS
  5. Plugin nền jQuery

Tác giả

  • Airen
  • Ngày 22 tháng 7 năm 2022

liên kết

  • bản demo và mã
  • Tải xuống

Làm với

  • HTML/CSS

Về một mã

Đã sửa lỗi hiệu ứng nền (Hiệu ứng cuộn thị sai)

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Làm cách nào để tạo nền tĩnh trong css?

Tác giả

  • Jacob Potvin
  • ngày 2 tháng 10 năm 2020

liên kết

  • bản demo và mã
  • Tải xuống

Làm với

  • HTML/CSS

Về một mã

Lưới có nền cố định

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. phông chữ tuyệt vời. css

Tác giả

  • Joanne-codepage
  • 7 Tháng Ba, 2019

liên kết

  • bản demo và mã
  • Tải xuống

Làm với

  • HTML/CSS

Về một mã

Hiệu ứng cuộn nền cố định CSS

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • Wendy
  • 20 Tháng hai, 2019

liên kết

  • bản demo và mã
  • tải xuống (5 kb *zip)

Làm với

  • HTML/CSS

Về mã

Đã sửa lỗi tệp đính kèm nền

Đã sửa lỗi nền với nội dung cuộn

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • Clare
  • 10 Tháng mười, 2018

liên kết

  • bản demo và mã
  • Tải xuống

Làm với

  • HTML/CSS

Về một mã

Nội dung trung tâm, nền cố định

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • Steve Gibbons
  • 18 Tháng Chín, 2018

liên kết

  • bản demo và mã
  • Tải xuống

Làm với

  • HTML/CSS (SCSS)

Về một mã

Anh hùng nền cố định CSS

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • mtness Excelsior
  • 30 Tháng Tám, 2018

liên kết

  • bản demo và mã
  • Tải xuống

Làm với

  • HTML/CSS

Về một mã

Cuộn thị sai nền cố định chỉ dành cho CSS

Đây là một giải pháp trình duyệt chéo thực sự cho các bảng nền cố định chỉ CSS

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • Luke Cheng
  • 19 Tháng Sáu, 2018

liên kết

  • bản demo và mã
  • tải xuống (3 kb *zip)

Làm với

  • HTML/CSS

Về mã

tệp đính kèm nền. đã sửa;

Nền có thuộc tính CSS _______________

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • carpe numidium
  • 6 Tháng Giêng, 2018

liên kết

  • bản demo và mã
  • tải xuống (2 kb *zip)

Làm với

  • HTML/CSS (SCSS)

Về mã

Hiệu ứng cuộn nền

Hiệu ứng cuộn ảnh nền CSS thuần túy

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • Ali Klein
  • 20 Tháng mười, 2017

liên kết

  • bản demo và mã
  • tải xuống (3 kb *zip)

Làm với

  • HTML/CSS (SCSS)

Về mã

Tệp đính kèm nền đã được sửa

Tệp đính kèm nền CSS thuần túy được cố định trong vùng chứa

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng. không

Phụ thuộc. -

Tác giả

  • Pooja Patel
  • 13 Tháng Chín, 2017

liên kết

  • bản demo và mã
  • Tải xuống

Làm với

  • HTML/CSS

Về một mã

Lớp phủ bán chuyển tiếp

Lớp phủ màu đen bán trong suốt thú vị với văn bản xuất hiện trên màn hình chính khi cuộn

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • Maria Burlando
  • 2 Tháng Tám, 2017

liên kết

  • bản demo và mã
  • Tải xuống

Làm với

  • HTML/CSS (SCSS)

Về một mã

Di chuyển nền cố định

Một ví dụ về bốn div, hai trong số đó có nền cố định. Trong khi cuộn nó tạo ra một hiệu ứng đẹp. Sử dụng rộng rãi flexbox để căn chỉnh mọi thứ và tạo nội dung để tạo các nút động

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • Geoff Graham
  • 8 Tháng tám 2016

liên kết

  • bản demo và mã
  • tải xuống (2 kb *zip)

Làm với

  • HTML/CSS (SCSS)

Về mã

Cuộn hình nền trong CSS

chuyến đi Seattle. cuộn nền trong CSS với background-attachment: fixed;

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • Geoff Yuen
  • 31 Tháng Bảy, 2015

liên kết

  • bản demo và mã
  • Tải xuống

Làm với

  • HTML/CSS (SCSS)

Về một mã

Vui vẻ với Bapt. nó

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • đại lộ Justin
  • 16 Tháng Bảy, 2015

liên kết

  • bản demo và mã
  • tải xuống (3 kb *zip)

Làm với

  • HTML/CSS (SCSS)

Về mã

Các phần đầy đủ nền đã sửa

Các phần toàn màn hình được xác định với các phần thay thế có hình nền cố định/không cuộn

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • nhà chung cư. đồng
  • 25 Tháng Ba, 2015

liên kết

  • bản demo và mã
  • tải xuống (1 kb *zip)

Làm với

  • HTML/CSS/JS

Về mã

Đã sửa lỗi hiệu ứng nền

Một mẫu đơn giản tận dụng thuộc tính CSS đính kèm nền để tạo hiệu ứng nền cố định

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. jquery. js

Tác giả

  • Kseso
  • 7 Tháng Ba, 2015

liên kết

  • bản demo và mã
  • tải xuống (11 kb *zip)

Làm với

  • HTML/CSS

Về mã

Cuộn ma thuật trong CSS đơn giản

Nếu lăn chuột xuống. cuộn sang phải

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • bom sừng
  • 5 Tháng Ba, 2015

liên kết

  • bản demo và mã
  • Tải xuống

Làm với

  • HTML/CSS (SCSS)

Về một mã

Nền cố định CSS

Ví dụ này cho thấy hai hiệu ứng đẹp mắt mà bạn có thể dễ dàng đạt được với thuộc tính CSS background-attachment:fixed

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • Joshua Mitchell
  • 1 Tháng Bảy, 2014

liên kết

  • bản demo và mã
  • tải xuống (3 kb *zip)

Làm với

  • HTML/CSS

Về mã

Trình chiếu CSS cổ điển

Trình chiếu CSS với background-attachment: fixed;

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng.

Phụ thuộc. -

Tác giả

  • Derek Palladino
  • 30 Tháng Mười, 2013

liên kết

  • bản demo và mã
  • tải xuống (3 kb *zip)

Làm với

  • HTML/CSS

Về mã

Cuộn sách lật

Sử dụng hình nền và các phần khác nhau để lộ từng hình nền cố định để tạo hiệu ứng lật sách