Hướng dẫn về CSS Background Image. Ở đây chúng ta thảo luận về một cái nhìn tổng quan ngắn gọn về hình ảnh CSS Bối cảnh và các ví dụ khác nhau của nó cùng với thực hiện mã của nó.
Bạn đang xem : hình ảnh add nền css

CSS background image

Giới thiệu về CSS Background Image

CSS Background Image được định nghĩa là một tài sản CSS để ảnh nền thiết lập cho một hình ảnh element.The có thể được áp dụng như đồ họa hoặc gradient của một phần tử. Khách sạn này được gán bên trong một trang HTML và có thể được thực hiện để các yếu tố khối và nội tuyến. Lợi ích cốt lõi của khách sạn này là nó cho phép để đặt nội dung HTML thêm trên đầu trang của các trang như tiêu đề và cũng có thể cung cấp layering khả năng để chúng ta có một tùy chọn để thêm hình ảnh khác và nội dung văn bản cũng trong không gian có sẵn cùng.

Cú pháp:

Bắt đầu của bạn Khóa học Phát triển phần mềm miễn phí

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

background-image: url | none | ban đầu | kế thừa;

Những hình ảnh nền có bốn thông số:

URL: Sử dụng một hình ảnh trong trang là khá đơn giản bằng cách sử dụng url giá trị () mà cung cấp một đường dẫn tập tin của một hình ảnh. Chúng tôi cũng có thể thiết lập URI cho url ().

Làm thế nào để Thêm hình ảnh nền trong CSS sử dụng phương pháp khác nhau?

Hãy xem cách hình nền bao gồm một số phương pháp trong một HTML.

1. Sử dụng Inline CSS: Phương pháp dễ nhất và mạnh mẽ là một trong những này trong đó sử dụng tài sản background-image bằng thẻ & lt; div & gt; phần tử.

2. Sử dụng CSS nhúng: Nó được tham chiếu sử dụng lớp hoặc một phần Id .

Hình ảnh nền có thể được thực hiện bằng các thuộc tính như sau:

  • background-repeat: Phương pháp này đi kèm cùng với background-image và quy định cụ thể như thế nào hình nền nên lặp lại hay không. Phải mất một số giá trị có thể như no-repeat (không lặp lại hình ảnh), lặp lại-x (gạch hình ảnh theo chiều ngang), lặp lại-y (gạch hình ảnh theo chiều dọc).
  • background-position: Điều này cuối cùng xác định vị trí của các hình nền được đặt với các giá trị được thực hiện như một đầu, phía dưới, phải, trái, trung tâm và các kết hợp của các giá trị ( ví dụ: trái phía dưới). Các giá trị ngang và dọc có thể được kết hợp bởi bất kỳ nhu cầu.
  • background-size: Nó chỉ rõ kích thước của hình ảnh phải được đặt và cho phép để có thể kiểm soát kích thước. Sau đây là các giá trị được gán cho nền-size:
  • tự động:. Đó là một kích thước giá trị mặc định
  • chiều dài:. nó cho phép để xác định chiều rộng và chiều cao của một hình ảnh bằng pixel (10 px 30px)
  • bìa:. Phóng to hình nền hoàn toàn nhờ đó diện tích của một phần tử được bao phủ bởi toàn bộ hình nền tránh một số phần của hình ảnh bằng cách mở rộng quy mô nó
  • chiếm tỷ lệ: Chỉ định chiều rộng và chiều cao của một hình ảnh trong phần trăm. (10% 30%)
  • Center:. hình ảnh được đặt ở trung tâm

Hình ảnh nền không thể có bất kỳ hình ảnh tĩnh, chúng tôi cũng có thể cung cấp hình ảnh chuyển động như gif hoạt hình quá.

Ví dụ để Thực hiện CSS Background Image

Dưới đây là những ví dụ về CSS Hình nền:

Ví dụ # 1

Ví dụ này đặt hình nền hoàn toàn.

Mã:

back.html

& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
body {
background-image: url (background.jpg);
background-color: san hô;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& Lt; h1 & gt; Demo trên CSS. Chào mừng bạn đến Trang & lt; / h1 & gt;
& lt; / body & gt;
& Lt; html & gt;

Đầu ra:

CSS Background Image Ví dụ 1

Cùng mã với thay đổi chiều cao và chiều rộng của hình ảnh. Những hình ảnh ban đầu được giảm bớt trong trang theo đặc điểm kỹ thuật. đây là mã mà bộ để các điểm ảnh được xác định.

Mã:

ff.html

& lt; body & gt;
& Lt; div class = "dem1" & gt;
& Lt; img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTvK7BPIGljz1jLknJfmvGyNmiXktGdry3SUg&usqp=CAU" class = "dem2" & gt;
& lt; / div & gt;
& Lt; / body & gt;

Code:

ff.css

.dem1 {
width: 900px;
height: 300px;
margin: auto;
}
.dem2 {
width: 50%;
chiều cao: 80%;
}
Đầu ra:

CSS Background Image Ví dụ 2

Ví dụ # 2

Setting hai nền Images.

Mã:

& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
body {
background-image: url (tenor.jpg), url (paper.jpg);
background-color: san hô;
}
& lt; / style & gt;
& lt; / head & gt;
& Lt; body & gt;
& Lt; h1 & gt; Demo trên CSS. Chào mừng bạn đến Trang & lt; / h1 & gt;
& lt; / body & gt;
& Lt; html & gt;

Đầu ra:

CSS Background Image Ví dụ 3

Ví dụ # 3

Xác định nền đòi hỏi sở hữu hình ảnh, kích thước như thế nào chúng ta quy định dưới # BG1 lớp. Và cung cấp phần CSS trên cơ thể bao gồm các mã HTML đầy đủ để phù hợp với màn hình cửa sổ.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
# BG1 {
border: 1px solid black;
padding: 20px;
background: url (wind.png);
background-repeat: no-repeat;
background-kích thước: auto;
}
# Bg2 {
border: 1px solid black;
padding: 20px;
background: url (wind.png);
background-repeat: no-repeat;
background-kích thước: 500px 200px;
}
& lt; / style & gt;
& lt; / head & gt;
& Lt; body & gt;
& Lt; h2 & gt; background-image bản demo sử dụng Kích thước tài sản & lt; / h2 & gt;
& Lt; div id = "BG1" & gt;
& Lt; h2 & gt; Đây là trang & lt web của tôi; / h2 & gt;
& Lt; p & gt; Kích thước ban đầu được thiết lập để nền & lt; / p & gt;
& lt; / div & gt;
& Lt; h2 & gt; Ví dụ xác định Width & lt; / h2 & gt;
& Lt; div id = "bg2" & gt;
& Lt; h2 & gt; Đây là trang tiếp theo của tôi & lt; / h2 & gt;
& Lt; p & gt; Vâng, kích thước được quy định ở đây & lt; / p & gt;
& lt; / div & gt;
& lt; / body & gt;
& Lt; / html & gt;

Đầu ra:

Kích thước tài sản Ví dụ 4

Ví dụ # 4

Thiết lập một nền kích thước đầy đủ với vị trí này.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; h1 & gt; hình ảnh Full Bối cảnh & lt; / h1 & gt;
& Lt; meta name = "viewport" content = "width = device-width, ban đầu quy mô = 1.1" & gt;
& lt; phong cách & gt;
cơ thể, html {
height: 100%;
margin: 1;
}
.full {
background-image: url ( "harry.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-kích thước: bìa;
}
& lt; / style & gt;
& lt; / head & gt;
& Lt; body & gt;
& Lt; div class = "đầy đủ" & gt; & lt; / div & gt;
& Lt; p & gt; Đây bản demo show hình ảnh đầy đủ chiều cao bằng cách thiết lập các container và mở rộng quy mô chúng một cách hoàn hảo với màn hình & lt; / p & gt;
& lt; / body & gt;
& Lt; / html & gt;

Sử dụng CSS chúng ta phải phù hợp với những hình ảnh vào màn hình bằng cách thiết lập kích thước tài sản cho trang bìa.

Đầu ra:

CSS Background Image Ví dụ 5

Ví dụ # 5

Sử dụng tỷ lệ Aspect chính xác với tài sản Border

Mã:

fit.html

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& Lt; script type = "text / javascript" src = "scripts.js" & gt;
& lt; / script & gt;
& Lt; link rel = "stylesheet" href = "styles.css" & gt;
& lt; / head & gt;
& Lt; body & gt;
& Lt; div & gt; & lt; / div & gt;
& lt; / body & gt;
& lt; h1 & gt; Với Aspect Ratio chính xác & lt; / h1 & gt;
& Lt; / html & gt;

Mã:

.css

div {
width: 100%;
height: 250px;
background-image: url ( 'https://www.cityam.com/wp-content/uploads/2020/02/London_Tower_Bridge_City.jpg');
background-repeat: no-repeat;
background-kích thước: chứa;
border: 2px rắn vàng;
}

Vì vậy, bằng, là một hình ảnh ban đầu không được mờ khi nhân rộng những hình ảnh để phù hợp với khu vực này. Đây là kết quả cho các mã trên.

Đầu ra:

Với Aspect Ratio chính xác Ví dụ 6

Ví dụ # 6

Thêm bìa văn bản trên hình nền.

Mã:

fit.html

& lt; html & gt;
& lt; đầu & gt;
& lt; meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" / & gt;
& lt; title & gt; Tạo một HTML PAge với Hình nền & lt; / title & gt;
& lt; phong cách & gt;
nội dung {
font-family: "Calibri", chữ thảo;
font-size: 14px;
màu: # 036;
}
h1, h2, h3 {
font-family: Arial, Comic Sans MS, sans-serif;
font-size: 14px;
font-weight: bold;
}
html {
background: url (harry.jpg) cố định trung tâm không lặp lại;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#desk {width: 500px; margin: tự động 40px; đệm: 22px; nền: trắng; -moz-box-shadow: 0 0 22px đen; -webkit-box-shadow: 0 0 22px đen; box-shadow: 0 0 22px xanh lam; }
& lt; / style & gt;
& lt; đầu & gt;
& lt; body & gt;
& lt; div id = "bàn" & gt;
& lt; h1 & gt; Tạo HTML PAge với Hình nền & lt; / h1 & gt;
Đây là một cách để thêm hình nền cho trang web bằng html. & lt; br / & gt;
Trong trường hợp này, tôi đã sử dụng: & lt; br / & gt;
& lt; mạnh & gt; html & lt; / strong & gt; {& lt; br / & gt;
background: url (harry.jpg) cố định trung tâm không lặp lại; & lt; br / & gt;
-webkit-background-size: cover; & lt; br / & gt;
-moz-background-size: cover; & lt; br / & gt;
-o-background-size: cover; & lt; br / & gt;
background-size: cover; & lt; br / & gt;
} & lt; br / & gt;
quy mô toàn bộ Nền. & lt; br / & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Ví dụ về tạo trang HTML 7

Kết luận

Do đó, trong hướng dẫn này, chúng tôi đã thấy một cách đơn giản để viết mã hình ảnh bằng CSS. Ngoài ra, chúng tôi đã tìm hiểu cách hình ảnh đó phù hợp với màn hình. Hình nền với CSS cung cấp các tính năng tốt cho trang web và các nhà thiết kế web cảm thấy hài lòng với chủ đề của họ. Vì vậy, ở cuối phần này, bạn sẽ có thể tùy chỉnh các tác phẩm một cách hiệu quả.

Các bài báo được đề xuất

Đây là hướng dẫn về Hình nền CSS. Ở đây chúng tôi thảo luận về tổng quan ngắn gọn về Hình ảnh nền CSS và các ví dụ khác nhau của nó cùng với việc triển khai mã của nó. Bạn cũng có thể xem qua các bài viết đề xuất khác của chúng tôi để tìm hiểu thêm -

0

Chia sẻ

Chia sẻ


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

Full Screen Background Image with HTML CSS | Responsive Full Page Background Image CSS

alt

  • Tác giả: Cem Eygi Media
  • Ngày đăng: 2021-10-23
  • Đánh giá: 4 ⭐ ( 7706 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn how to make a Full-Screen Background Image with HTML and CSS. In this video, you're going to learn how to set a Responsive Full Page Background Image by using pure HTML & CSS.

    Background Image Credit: https://unsplash.com/photos/DlkF4-dbCOU
    More Free Images: https://unsplash.com

    SECTIONS:
    (00:00) -  INTRO
    (00:25) - Adding The Background Image & First Styling
    (02:23)  - The VH Unit & Viewport Explained
    (04:10)  - Adjusting Background to Full Screen
    (04:53)  -  Removing White Space
    (05:20)  -  Final Styling

    -------------------------------- FOLLOW ME ON SOCIAL MEDIA ------------------------------------

    Instagram: https://www.instagram.com/cemeygimedia/
    Facebook Private Group: https://www.facebook.com/groups/cemeygimedia
    Twitter: https://twitter.com/cem_eygi - (@cem_eygi)
    Join My Email List: https://bit.ly/2KXEBsv

    responsive css webdevelopment

Thêm hình nền vào div bằng CSS

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 3 ⭐ ( 9398 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đã cố gắng thêm hình nền vào một lớp div bằng CSS, nhưng không thành công. Mã HTML: