Thuộc tính kích thước nền CSS – kích thước nền css phù hợp với chiều cao

Kích thước nền là một thuộc tính CSS đặt kích thước của hình ảnh nền. Đọc về các giá trị và thử các ví dụ cho chính bạn.

Bạn đang xem : kích thước nền css vừa với chiều cao

Kích thước nền
thuộc tính được sử dụng để xác định kích thước của hình nền.

Thuộc tính background-size là một trong những thuộc tính CSS3 .

Thuộc tính này có năm giá trị: auto, length, phần trăm, cover, chứa.

Tự động đặt hình nền ở kích thước ban đầu. Đó là giá trị mặc định.
Chiều dài chỉ định chiều cao và chiều rộng của hình nền . Giá trị âm không hợp lệ.
Phần trăm đặt chiều cao và chiều rộng của hình nền được chỉ định bằng phần trăm. Ở đây, các giá trị âm cũng không hợp lệ.

Che tỷ lệ hình ảnh càng lớn càng tốt để không làm giãn hình ảnh. Nếu tỷ lệ của hình ảnh khác với phần tử, nó sẽ được cắt theo chiều dọc hoặc chiều ngang để không còn khoảng trống.

Chứa đổi kích thước hình nền để hình ảnh hiển thị đầy đủ.

Có những hình ảnh, chẳng hạn như JPEG, có kích thước và tỷ lệ nội tại, và những hình ảnh, chẳng hạn như gradient, không có kích thước và tỷ lệ nội tại. Trừ khi có quy định khác, cái thứ hai luôn chiếm kích thước của vùng nền của một phần tử.

Thuộc tính background-size cũng nhận các giá trị được phân tách bằng dấu phẩy và khi phần tử có nhiều hình nền, mỗi giá trị sẽ được áp dụng cho một hình nền phù hợp. Ví dụ: giá trị đầu tiên được áp dụng cho hình nền đầu tiên, giá trị thứ hai cho hình ảnh thứ hai, v.v.

Giá trị ban đầu
Tự động

Áp dụng cho
Tất cả các yếu tố. Nó cũng áp dụng cho :: first-letter :: first-line .

Được kế thừa
Không.

Hoạt hình
Đúng. Kích thước của hình nền có thể thay đổi được.

Phiên bản
CSS3

Cú pháp DOM
object.style.backgroundSize = “50% 100%”;

Cú pháp

  

background-size

: auto | chiều dài | bao che | chứa | ban đầu | inherit;

Ví dụ về Thuộc tính

background-size

:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background-image

:

url

(

"/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg "

);

background-size

:

300px

200px

;

background-repeat

: no-repeat; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về kích thước nền.

& lt; /

h2

& gt;

& lt;

p

& gt;

Đây có thể là bất kỳ thông tin nào.

& lt ; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Trong ví dụ trên, giá trị độ dài được áp dụng. Nó thiết lập chiều rộng và chiều cao của hình nền. Giá trị đầu tiên đặt chiều rộng và giá trị thứ hai đặt chiều cao. Nếu một giá trị được cung cấp, giá trị thứ hai được đặt thành “tự động”.

Xem một ví dụ khác trong đó chiều rộng và chiều cao của hình nền được xác định theo tỷ lệ phần trăm.

Ví dụ về

background-size

với giá trị “%”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background-image

:

url

(

"/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg "

);

background-size

:

40%

100%

;

background-repeat

: no-repeat; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về kích thước nền.

& lt; /

h2

& gt;

& lt;

p

& gt;

Đây có thể là bất kỳ thông tin nào.

& lt ; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Giá trị “cover” làm cho hình ảnh lớn nhất có thể mà không làm giãn hình ảnh.

Ví dụ về

background-size

với giá trị “cover”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background-image

:

url

(

"/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg "

);

background-size

: cover;

background-repeat

: no-repeat; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về kích thước nền.

& lt; /

h2

& gt;

& lt;

p

& gt;

Đây có thể là bất kỳ thông tin nào.

& lt ; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về

thuộc tính background-size

với giá trị “chứa”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background-image

:

url

(

"/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg "

);

background-size

: chứa;

background-repeat

: no-repeat; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về kích thước nền.

& lt; /

h2

& gt;

& lt;

p

& gt;

Đây có thể là bất kỳ thông tin nào.

& lt ; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về

background-size

với giá trị “auto”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background-image

:

url

(

"/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg "

);

background-size

: auto;

background-repeat

: no-repeat; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về kích thước nền.

& lt; /

h2

& gt;

& lt;

p

& gt;

Đây có thể là bất kỳ thông tin nào.

& lt ; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về

background-size

với giá trị “length”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

width

:

260px

;

height

:

190px

;

background

:

url

(

"/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg "

) không lặp lại;

background-size

:

260px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Thuộc tính CSS background-size

& lt; /

h1

& gt;

& lt;

p

& gt;

Ví dụ về thuộc tính background-size với giá trị chiều dài.

& lt; /

p

& gt;

& lt;

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Giá trị

Giá trị
Sự mô tả
Chơi nó

Tự động
Đây là giá trị mặc định. Nó đặt hình nền ở kích thước ban đầu của nó.

Chơi »

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 và giá trị thứ hai đặt chiều cao. Nếu chỉ đưa ra một giá trị, giá trị thứ hai được đặt thành tự động. Nó được chỉ định bởi “px”, “em”.

Chơi »

tỷ lệ phần trăm
Đặt chiều rộng và chiều cao theo tỷ lệ phần trăm. Giá trị đầu tiên đặt chiều rộng và giá trị thứ hai đặt chiều cao. Nếu chỉ đưa ra một giá trị, giá trị thứ hai được đặt thành tự động.

Chơi »

trải ra
Cân hình nền càng lớn càng tốt để bao phủ tất cả các vùng nền.

Chơi »

Lưu trữ
Chia tỷ lệ hình nền thành kích thước lớn nhất để chiều rộng và chiều cao của nó có thể lấp đầy bên trong vùng nội dung.

Chơi »

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

Chơi »

thừa kế
Kế thừa thuộc tính từ phần tử mẹ của nó.


Xem thêm những thông tin liên quan đến chủ đề kích thước nền css phù hợp với chiều cao

Kích thước VH, VW trong css rất hay, bạn đã biết chưa?

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-10-06
  • Đánh giá: 4 ⭐ ( 3266 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kích thước vh, vw trong website là gì? Tại sao cần sử dụng nó?
    Nếu như bạn đang học lập trình website thì đây là một phần rất quan trọng trong đơn vị kích thước khối trong website.
    Trong video này tôi chia sẻ cho bạn về những đơn vị viewport height, viewport width này.

    ——
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ————
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    ————————–
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

background-size

  • Tác giả: hocwebchuan.com
  • Đánh giá: 3 ⭐ ( 6587 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: background-size là thuộc tính có trong CSS3, cho phép thay đổi kích cỡ của background tùy ý với việc điều chỉnh thuộc tính background-size.

Xác định kích thước responsive tốt nhất trong thiết kế website

  • Tác giả: tatthanh.com.vn
  • Đánh giá: 3 ⭐ ( 6483 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Website responsive được biết đến với khả năng tự động định dạng để hiển thị tốt nhất ở các kích thước khác nhau. Thế nhưng, để xác định kích thước responsive tốt nhất lại không phải điều dễ dàng. Tham khảo cách xác định kích thước website responsive hiệu quả nhất trong bài viết dưới đây.

Background-size trong CSS

  • Tác giả: websitehcm.com
  • Đánh giá: 3 ⭐ ( 6084 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Background-size trong CSS w3seo kiến thức có bản về background-size trong CSS, tìm hiểu thuộc tính background-size

[CSS] Thuộc tính chiều cao (height) và chiều rộng (width) trong CSS

  • Tác giả: cuongquach.com
  • Đánh giá: 3 ⭐ ( 1423 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ cùng tìm hiểu về giá trị cơ bản dùng để quy định thuộc tính về chiều cao (height) và chiều rộng (width) của phần tử HTML. Hai giá trị cơ bản này thường được dùng nhiều khi bạn thiết kế CSS Layout, qua đó bạn cần thiết lập các tinh chỉnh về cách hiển thị theo kích thước phần tử mong muốn.

Thay Đổi Kích Thước Ảnh Nền Máy Tính, Cách Chỉnh Ảnh Cho Vừa Màn Hình Desktop

  • Tác giả: dramrajani.com
  • Đánh giá: 5 ⭐ ( 6911 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết hướng dẫn bạn có thể tự tìm độ phân giải của màn hình máy tính, đồng thời từ đó có thể tạo ra cho mình một ảnh nền chuẩn xác,  Tìm độ phân giải màn hình máy tínhTrước khi bạn thay đổi kích thước hình ảnh để làm ảnh nền máy tính, bạn cần phải biết kích thước của nó ra sao

Hình nền CSS để vừa với chiều rộng, chiều cao sẽ tự động điều chỉnh tỷ lệ theo tỷ lệ

  • Tác giả: vi.visionaryschoolof-arts.org
  • Đánh giá: 5 ⭐ ( 9728 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có nội dung {background: url (images / background.svg); } Hiệu quả mong muốn là hình nền này sẽ có chiều rộng bằng chiều rộng của trang, chiều cao thay đổi để duy trì tỷ lệ …

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  Signaler un contenu illicite - Cliquez, Signalez - cách import sql vao phpmyadmin