Bạn đang xem : css thu nhỏ hình nền

CSS

background-size

Thuộc tính

Ví dụ

Chỉ định kích thước của hình nền bằng “auto” và tính bằng pixel:

# example1 {
background: url (mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}

# example2 {
background: url (mountain.jpg);
background-repeat:
không lặp lại;
background-size: 300px 100px;
}

Hãy tự mình thử »

Các ví dụ khác về “Hãy tự mình thử” bên dưới.

Định nghĩa và Cách sử dụng

Thuộc tính background-size chỉ định kích thước của hình nền.

Có bốn cú pháp khác nhau mà bạn có thể sử dụng với thuộc tính này: từ khóa
cú pháp (“auto”, “cover” và “chứa”), cú pháp một giá trị (đặt chiều rộng của
hình ảnh (chiều cao trở thành “tự động”), cú pháp hai giá trị (giá trị đầu tiên: chiều rộng của
hình ảnh, giá trị thứ hai: chiều cao) và nhiều cú pháp nền (được phân tách
bằng dấu phẩy).

Hiển thị bản trình diễn ❯

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Các số theo sau -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.

Tài sản

kích thước nền
4.0
1.0 -webkit-
9.0
4,0
3,6-moz-
4.1
3.0 -webkit-
10,5
10,0 -o-

Cú pháp CSS

background-size: auto || cover | chứa | ban đầu | inherit;

Giá trị thuộc tính

Giá trị
Sự mô tả
Thử nghiệm

Tự động
Giá trị mặc định. Hình nền được hiển thị ở kích thước ban đầu
Bản trình diễn ❯

chiều dài
Đặt chiều rộng và chiều cao của hình nền. Giá trị đầu tiên đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được đưa ra, giá trị thứ hai được đặt thành “tự động”. Đọc về đơn vị độ dài
Bản trình diễn ❯

tỷ lệ phần trăm
Đặt chiều rộng và chiều cao của hình nền theo phần trăm của phần tử mẹ. Giá trị đầu tiên đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được cung cấp, giá trị thứ hai được đặt thành “tự động”
Bản trình diễn ❯

trải ra
Thay đổi kích thước hình nền để bao phủ toàn bộ vùng chứa, ngay cả khi nó
phải kéo dài hình ảnh hoặc cắt một chút khỏi một trong các cạnh
Bản trình diễn ❯

Lưu trữ
Thay đổi kích thước hình nền để đảm bảo hình ảnh hiển thị đầy đủ
Bản trình diễn ❯

ban đầu
Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về tên ban đầu

thừa kế
Kế thừa thuộc tính này từ phần tử mẹ của nó. Đọc về kế thừa

Các ví dụ khác

Ví dụ

Chỉ định kích thước của hình nền bằng phần trăm:

# example1 {
background: url (mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}

# example2 {
background: url (mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}

Hãy tự mình thử »

Ví dụ

Chỉ định kích thước của hình nền có “bìa”:

# example1 {
background: url (mountain.jpg);
background-repeat: không lặp lại;
background-size: cover;
}

Hãy tự mình thử »

Ví dụ

Chỉ định kích thước của hình nền bằng “chứa”:

# example1 {
background: url (mountain.jpg);
background-repeat: no-repeat;
kích thước nền:
chứa;
}

Hãy tự mình thử »

Ví dụ

Ở đây chúng tôi có hai hình nền. Chúng tôi chỉ định kích thước của hình nền đầu tiên bằng “chứa”,
và hình nền thứ hai có “bìa”:

# example1 {
background: url (img_tree.gif), url (mountain.jpg);

background-repeat: không lặp lại;Kích thước nền
:
chứa, che;
}

Hãy tự mình thử »

Ví dụ

Sử dụng các thuộc tính nền khác nhau để tạo hình ảnh “anh hùng”:

.hero-image {
background-image: url (“photographer.jpg”); /* Các
hình ảnh được sử dụng * /
background-color: #cccccc; / * Được sử dụng nếu hình ảnh
không khả dụng * /
height: 500px; / * Bạn phải đặt chiều cao được chỉ định * /
background-position: trung tâm; / * Căn giữa hình ảnh * /
background-repeat: không lặp lại; / * Không lặp lại hình ảnh * /
background-size: bìa; / * Thay đổi kích thước hình nền để bao phủ toàn bộ vùng chứa * /
}

Hãy tự mình thử »

Các trang liên quan

Hướng dẫn CSS: CSS Backgrounds

Tham chiếu HTML DOM: thuộc tính backgroundSize


Xem thêm những thông tin liên quan đến chủ đề css làm cho hình nền nhỏ hơn

CSS Background-image

  • Tác giả: F8 Official
  • Ngày đăng: 2020-01-30
  • Đánh giá: 4 ⭐ ( 1464 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy học tại http://fullstack.edu.vn để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.

    hoclaptrinh mienphi frontend backend devops
    ———————————————————–
    SƠN ĐẶNG
    ► Facebook: https://fb.com/sondnmc
    ► Email: sondnf8@gmail.com
    —————————————
    ► Học lập trình: http://fullstack.edu.vn
    ► Viết CV xin việc: http://mycv.vn
    —————————————
    HỌC LẬP TRÌNH MIỄN PHÍ
    ► Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
    ► Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css

Bài 09: Làm Việc Với Nền

  • Tác giả: hocban.vn
  • Đánh giá: 3 ⭐ ( 1548 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm việc với nền (background) là việc mà bạn sẽ thực hiện rất nhiều trong CSS. Như chọn màu nền, ảnh nền, cách hiển thị ảnh nền,..

Cách css tự động resize ảnh nền theo thẻ div – WebFaver

  • Tác giả: webfaver.com
  • Đánh giá: 5 ⭐ ( 8697 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Với một kỹ thuật css tự động resize ảnh, bạn có thể giải quyết vấn đề này để ảnh thumbnail luôn fix đúng theo kích thước quy định với bất cứ tỉ lệ ảnh nào.

Background trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 5400 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Background trong CSS – Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

9 cách sử dụng background (nền) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 3308 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách làm hình nền full màn hình trong CSS

  • Tác giả: blog.kenhtinhoc.vn
  • Đánh giá: 5 ⭐ ( 6333 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 1522 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] 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…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  [Last Week in .NET #81] – Happy Birthday, .NET - bunifu ui

By ads_php