Bạn đang xem : hình nền css có màu nền

CSS

background-image

Thuộc tính

Ví dụ

Đặt hình nền cho & lt; body & gt; phần tử:

nội dung {
background-image: url (“paper.gif”);
màu nền: #cccccc;
}

Hãy tự mình thử »

Ví dụ

Đặt hai hình nền cho & lt; body & gt; phần tử:

nội dung {
background-image: url (“img_tree.gif”), url (“paper.gif”);
background-color: #cccccc;
}

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-image đặt một hoặc nhiều hình nền cho một phần tử.

Theo mặc định, hình nền được đặt ở góc trên cùng bên trái của
và được lặp lại theo cả chiều dọc và chiều ngang.

Mẹo: Nền của một phần tử là tổng kích thước của phần tử, bao gồm
đệm và đường viền (nhưng không phải lề).

Mẹo: Luôn đặt background-color để sử dụng nếu không có hình ảnh.

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

Giá trị mặc định:
không ai

Thừa hưởng:
không

Hoạt hình:
không. Đọc về hoạt ảnh

Phiên bản:
CSS1 + giá trị mới trong CSS3

Cú pháp JavaScript:
.style.backgroundImage = “url (img_tree.gif)”
Hãy thử

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.

Tài sản

hình nền
1,0
4.0
1,0
1,0
3.5

Lưu ý: IE8 trở về trước không hỗ trợ nhiều hình nền.

Cú pháp CSS

background-image: | none | initial | inherit;

Giá trị thuộc tính

Các ví dụ khác

Ví dụ

Đặt hai hình nền cho & lt; body & gt; yếu tố. Hãy để người đầu tiên
hình ảnh chỉ xuất hiện một lần (không lặp lại) và hãy để hình ảnh thứ hai được lặp lại:

nội dung {
background-image: url (“img_tree.gif”), url (“paper.gif”);

background-repeat: không lặp lại, lặp lại;
background-color: #cccccc;
}

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ử »

Ví dụ

Đặt gradient tuyến tính (hai màu) làm hình nền cho & lt; div & gt; phần tử:

# grad1 {
height: 200px;
background-color: #cccccc;
background-image:
tuyến tính-gradient (đỏ, vàng);
}

Hãy tự mình thử »

Ví dụ

Đặt gradient tuyến tính (ba màu) làm hình nền cho & lt; div & gt; phần tử:

# grad1 {
height: 200px;
background-color: #cccccc;
background-image:
tuyến tính-gradient (đỏ, vàng, lục);
}

Hãy tự mình thử »

Ví dụ

Hàm lặp lại tuyến tính-gradient () được sử dụng để lặp lại độ dốc tuyến tính:

# grad1 {
height: 200px;
background-color: #cccccc;
background-image:
lặp lại-tuyến tính-gradient (đỏ, vàng 10%, xanh lục 20%);
}

Hãy tự mình thử »

Ví dụ

Đặt một gradient xuyên tâm (hai màu) làm hình nền cho & lt; div & gt; phần tử:

# grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient (đỏ, vàng);
}

Hãy tự mình thử »

Ví dụ

Đặt một gradient xuyên tâm (ba màu) làm hình nền cho & lt; div & gt; phần tử:

# grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient (đỏ, vàng, lục);
}

Hãy tự mình thử »

Ví dụ

Hàm repeat-radial-gradient () được sử dụng để lặp lại các gradient xuyên tâm:

# grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeat-radial-gradient (đỏ, vàng 10%, xanh lục 20%);
}

Hãy tự mình thử »

Các trang liên quan

Hướng dẫn CSS: CSS Background ,
Nền CSS (nâng cao) ,
Bằng cấp CSS

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


Xem thêm những thông tin liên quan đến chủ đề hình nền css với màu nền

Tìm hiểu về màu nền, hình nền (background) trong CSS và HTML

  • Tác giả: Bảo Quốc Nguyễn
  • Ngày đăng: 2018-05-25
  • Đánh giá: 4 ⭐ ( 1037 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: https://quocbuugroup.com/hoc-thiet-ke-lap-trinh-website-chuyen-nghiep.html
    CSS căn bản – Tìm hiểu về màu nền, hình nền (background) trong CSS và HTML

Thiết lập hình nền trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 1797 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập hình nền trong CSS như màu sắc, hình ảnh, cách sử dụng các thuộc tính của hình nền như có lặp không, vị trí ảnh, viết css ngắn cho hình nền …

Thiết lập màu nền với CSS background

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 6430 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập màu nền với CSS background, sử dụng các thuộc tính background, background-image, background-repeat

Background trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 6468 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.

Thuộc tính Background trong CSS

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 5 ⭐ ( 8081 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu cách thiết lập nền / thuộc tính background cho một phần tử bằng CSS.

[Học CSS] Màu nền và Ảnh nền (background)

  • Tác giả: brandee.edu.vn
  • Đánh giá: 3 ⭐ ( 6455 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này thuộc phần 13 của 26 phần trong serie Học CSS cơ bảnContents1.Màu nền với background-color2.Ảnh nền với background-image2.1.Tùy chỉnh lặp lại ảnh nền với background-repeat2.2.Đổi vị trí ảnh nền với background-position3.Lời kết3.1.Xem tiếp bài trong serie4.Bài liên quanTạm gác qua các khái niệm về Box Model qua một bên mà ở phần này […]

Nền với CSS

  • Tác giả: www.codelean.vn
  • Đánh giá: 3 ⭐ ( 7605 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CodeLean.vn là nơi chia sẻ kiến thức của những người học, làm và dạy trong lĩnh vực công nghệ thông tin.

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  [PDF] Bài tập chia thừa kế theo luật dân sự 2015 (có đáp án) - bài tập javascript có lời giải

By ads_php