Thuộc tính hình nền CSS – nút css hình nền

Bạn đang xem : hình nền nút css

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:
lặp lại-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ủ đề nút css hình nền

CSS Background – Thiết lập màu nền và ảnh nền với CSS

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2021-08-17
  • Đánh giá: 4 ⭐ ( 5060 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu nhóm thuộc tính CSS Background cho phép thiết lập màu nền và ảnh nền cho các phần tử Web: background-color, background-image, background-clip, background-origin, background-repeat, background-size, background-position, background-attachment.

    Nếu bạn thấy nội dung video giá trị và hữu ích, hãy ủng hộ mình một ly cà phê nhé.
    Rất mong nhận được sự động viên từ các bạn. Một chút khích lệ từ người xem sẽ là động lực to lớn để mình tiếp tục phát triển kênh.
    BIDV: 21510002210466
    Vietcombank: 0451000308735
    hoặc qua ví điện tử momo, zalopay, shoppeepay: https://bit.ly/ViDienTu

    css html nguyenthithuylien

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

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 5661 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 …

Cách áp dụng CSS cho thẻ image, ảnh nền

  • Tác giả: funix.edu.vn
  • Đánh giá: 5 ⭐ ( 1482 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học cách áp dụng CSS cho thẻ image, ảnh nền đảm bảo đơn giản, dễ thực hiện. Hãy tham khảo ngay bài viết dưới đây, FUNiX sẽ hướng dẫn chi tiết cho bạn!

Vấn đề với các biến CSS và tạo kiểu nền nút

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 2360 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang tạo một phần tử tùy chỉnh và sau khi khởi chạy nó, tôi nhận thấy rằng có điều gì đó khá thú vị với kiểu nút mặc định. Chúng có màu trắng thay vì màu xám. Tôi cần có…

Nút nghiêng với màu nền chuyển sắc bằng CSS3 – Chan Canvas

  • Tác giả: chancanvas.com
  • Đánh giá: 4 ⭐ ( 7637 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này hướng dẫn làm một nút (button) có độ nghiêng, với màu nền chuyển sắc và hiệu ứng đảo màu khi rê chuột vào sử dụng CSS3 đơn giản.

Tạo nút button bằng css

  • Tác giả: www.landgonow.com
  • Đánh giá: 4 ⭐ ( 7176 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có nhiều cách để tạo nút bạn có thể dùng phần mềm hoặc tạo trực tuyến từ các trang web. Hôm nay không cần phần mềm hay hổ trợ của web, mình xin chia sẻ cách để bạn có thể tạo nút bằng css dùng để ứng dụng cho blog mình. Thủ thuật này sẽ hình thành nên một nút dạng hình chữ nhật và có hiệu ứng khi rê chuột.

Nút nghiêng với màu nền chuyển sắc bằng CSS3 – Init HTML

  • Tác giả: www.inithtml.com
  • Đánh giá: 4 ⭐ ( 4158 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này hướng dẫn làm một nút (button) có độ nghiêng, với màu nền chuyển sắc sử dụng CSS3 đơn giản.

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  Cách sử dụng bộ chọn jQuery trên thuộc tính dữ liệu tùy chỉnh - bộ chọn thuộc tính dữ liệu jquery