CSS3: Cách Dùng Background | V1Study

Đăng ký đóng góp bài viết

× Họ và tên bạn *: Số Zalo *: Email: Lời nhắn: ĐĂNG KÝ

Học viên đăng nhập

× Tên đăng nhập *: Mật khẩu *: ĐĂNG NHẬP

Đổi mật khẩu

× Mật khẩu mới *: Nhắc lại mật khẩu mới *: ĐỔI MẬT KHẨU

• Đào tạo Độ tuổi từ 5 - 11 Độ tuổi từ 12 - 17 Từ 18 tuổi
• Lập trình Python Lập trình C C++ Java C# - C Sharp Android Scratch Pascal Robot mBot
• Web ReactJS HTML5 CSS3 JavaScript Node.js JSP ASP.NET Core jQuery PHP
• FW-CMS Laravel AngularJS Flutter Magento Bootstrap VueJS CodeIgnitor WordPress Sass Drupal
• Video Video Python Video Lập trình C Video C# Video Java Video HTML5-CSS3-JavaScript Video SQL Server Video PHP Video jQuery Video Android Video C++ Video Scratch
• Video1 Video XML-JSON Video MySQL Video Excel Video Giải thuật và Lập trình Video Sức khỏe Video Drupal Video mBot Video Giáo dục - Khoa học
• Other Unity Giải thuật và lập trình Giải thuật và lập trình - C CCNA Mạng máy tính Design Patterns English Facebook SEO Git Tin học đại cương Japanese App-Uti Download
• Data SQL Server XML JSON MySQL
• News

≡ ≡ CSS3 Hướng dẫn Giới thiệu CSS Giới thiệu CSS3 Cú pháp Vị trí đặt CSS CSS: white-space-collapse CSS: width Đơn vị kích thước Tối ưu hoá code CSS Bo góc với border-radius Tạo bóng với box-shadow Bao ảnh với border-image Sửa kích thước ảnh nền linear-gradient thẳng góc linear-gradient chéo góc linear-gradient tuỳ chỉnh repeating-linear-gradient() radial-gradient() repeating-radial-gradient() transform 2D transform 3D Animation (Hoạt ảnh) Các thuộc tính áp dụng được hiệu ứng hoạt họa (animation) hoặc transition Ưu tiên (!important) Cách dùng background Cách dùng font Cách dùng text Giả mã cho thẻ <a> Class & ID CSS cho <Span> & <Div> Cách dùng border Cách dùng width và height Cách dùng float và clear Cách dùng position Cách tạo đường thẳng nhiều màu :contains() CSS3 Cách tạo chân đường link Flex Container Flex Item Flex Responsive Cách xoay ảnh khi chạm chuột vào dùng CSS3 Thuộc tính CSS: alignment-adjust CSS: alignment-baseline appearance CSS: azimuth backface-visibility CSS: background CSS: background-attachment CSS: background-clip CSS: background-color CSS: background-image CSS: background-origin CSS: background-position CSS: background-repeat CSS: baseline-shift border CSS: border-bottom CSS: border-bottom-color CSS: border-bottom-style CSS: border-bottom-width CSS: border-collapse CSS: border-color CSS: border-image CSS: border-image-outset CSS: border-image-repeat CSS: border-image-slice CSS: border-image-source CSS: border-image-width CSS: border-left CSS: border-left-color CSS: border-left-style CSS: border-left-width CSS: border-right CSS: border-right-color CSS: border-right-style CSS: border-right-width CSS: border-spacing CSS: border-style CSS: border-top CSS: border-top-color CSS: border-top-style CSS: border-top-width CSS: border-width CSS: bottom CSS: box-decoration-break CSS: break-after CSS: break-inside CSS: caption-side CSS: clear CSS: clip CSS: color CSS: column-count CSS: column-fill CSS: column-gap CSS: column-rule CSS: column-rule-color CSS: column-rule-style CSS: column-rule-width CSS: column-span CSS: column-width CSS: content CSS: counter-increment CSS: counter-reset CSS: crop CSS: cue CSS: cue-after CSS: cue-before CSS: cursor CSS: direction display CSS: dominant-baseline CSS: drop-initial-after-adjust CSS: drop-initial-after-adjust CSS: drop-initial-after-align CSS: drop-initial-before-adjust CSS: drop-initial-before-align CSS: drop-initial-size CSS: drop-initial-value CSS: elevation CSS: empty-cells CSS: float CSS: font CSS: font-family CSS: font-size CSS: font-size-adjust CSS: font-stretch CSS: font-style font-variant CSS: font-weight CSS: grid-columns CSS: grid-rows CSS: hanging-punctuation CSS: height CSS: icon CSS: inline-box-align CSS: left CSS: letter-spacing CSS: line-height CSS: line-stacking CSS: line-stacking-ruby CSS: line-stacking-shift CSS: line-stacking-strategy CSS: list-style CSS: list-style-image CSS: list-style-position CSS: list-style-type margin CSS: margin-bottom CSS: margin-left CSS: margin-right CSS: margin-top CSS: marker-offset CSS: marks CSS: marquee-direction CSS: marquee-play-count CSS: marquee-speed CSS: marquee-style CSS: max-height CSS: max-width CSS: min-height CSS: min-width CSS: nav-down CSS: nav-index CSS: nav-left CSS: nav-right CSS: nav-up CSS: opacity CSS: orphans CSS: outline CSS: outline-color CSS: outline-offset CSS: outline-style CSS: outline-width CSS: overflow CSS: overflow-style CSS: padding CSS: padding-bottom CSS: padding-left CSS: padding-right CSS: padding-top CSS: page CSS: page-break-after CSS: page-break-before CSS: page-break-inside CSS: pause CSS: pause-after CSS: pause-before CSS: perspective CSS: perspective-origin CSS: pitch CSS: pitch-range CSS: play-during CSS: position CSS: punctuation-trim CSS: quotes CSS: resize CSS: richness CSS: right CSS: ruby-align CSS: ruby-overhang CSS: ruby-position CSS: ruby-span CSS: size CSS: speak CSS: speak-header CSS: speak-numeral CSS: speak-punctuation CSS: speech-rate CSS: src CSS: stress CSS: table-layout padding CSS: text-align-last CSS: text-decoration CSS: text-emphasis CSS: text-height CSS: text-indent CSS: text-justify CSS: text-outline text-align CSS: text-wrap CSS: top CSS: unicode-bidi CSS: unicode-range CSS: vertical-align CSS: visibility CSS: voice-family CSS: volume text-transform CSS: word-break CSS: word-spacing white-space CSS: z-index box-sizing transition columns word-wrap border-collapse text-indent CSS Tham khảo Lưu ý khi thiết kế đáp ứng với CSS Cách cấm bôi đen, copy bằng CSS Trì hoãn phần CSS không quan trọng Tạo tam giác với CSS3 CSS3: Cách dùng background Các khóa học qua video: Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript Học trên YouTube Đăng ký Hội viên Viết nhanh hơn - Học tốt hơnGiải phóng thời gian, khai phóng năng lực

Trong bài học này chúng ta sẽ được học về cách định màu nền/ảnh nền cho một trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh nền.

Màu nền (thuộc tính background-color)

Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như của thuộc tính color nhưng có thêm giá trị transparent để tạo nền trong suốt.

Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background-color để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ và cam.

body { background-color:cyan }

h1 { background-color:red }

h2 { background-color:orange }

Ảnh nền (thuộc tính background-image)

Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính background-image.

Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa để xem thuộc tính background-image sẽ hoạt động ra sao. Đầu tiên hãy tìm một tấm ảnh mà bạn thích, ở đây tôi sẽ lấy tấm ảnh logo của V1Study.com.

Sau đó, chúng ta sẽ viết CSS để đặt logo này làm ảnh nền trang web như sau:

body { background-image:url(logo.png) }

h1 { background-color:red }

h2 { background-color:orange }

p { background-color: #FDC689 }

Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp ngoặc đơn sau url. Do ảnh đặt trong cùng thư mục với file style3.css nên chúng ta chỉ cần ghi abc.jpg. Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục thì chúng ta sẽ phải ghi là background-image:url(img/abc.jpg). Đôi khi nếu không chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh.

Lặp lại ảnh nền (thuộc tính background-repeat)

Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị:

+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.

+ repeat-y: Chỉ lặp lại ảnh theo phương dọc.

+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.

+ no-repeat: Không lặp lại ảnh.

Bây giờ, chúng ta hãy thêm thuộc tính background-repeat này vào ví dụ trên thử xem sao.

body { background-image:url(logo.png); background-repeat:no-repeat; }

Các bạn xem, có phải ảnh nền đã không bị lặp lại như trong ví dụ trước, hãy thử thay đổi qua lại giữa các giá trị và xem kết quả tạo ra.

Khóa ảnh nền (thuộc tính background-attachment)

background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:

+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.

+ fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.

Định vị ảnh nền (thuộc tính background-position)

Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian của thành phần mà nó làm nền).

Thuộc tính background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị chính xác như centimeters, pixels, inches,… hay các đơn vị quy đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right.

Ví dụ:

background-position:5cm 2cm; : Ảnh được định vị 5cm từ trái qua và 2cm từ trên xuống.

background-position:20% 30%; : Ảnh được định vị 20% từ trái qua và 30% từ trên xuống.

background-position:bottom left; : Ảnh được định vị ở góc trái phía dưới

Thuộc tính background

Khi sử dụng quá nhiều thuộc tính CSS sẽ gây khó khăn cho người đọc, công tác chỉnh sửa cũng như tốn nhiều dung lượng ổ cứng cho nên CSS đưa ra một cấu trúc rút gọn cho các thuộc tính cùng nhóm.

Ví dụ, chúng ta có thể nhóm lại đoạn CSS sau:

background-color:transparent; background-image: url(logo.png); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;

thành một dòng ngắn gọn:

background:transparent url(logo.png) no-repeat fixed right bottom;

Từ ví dụ trên chúng ta có thể khái quát cấu trúc rút gọn cho nhóm background:

background:<background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>;

Theo mặc định thì các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.

Ví dụ: Chúng ta sẽ bỏ qua hai thuộc tính background-attachment và backgroundposition ở dòng mã trên đi: background:transparent url(logo.png) no-repeat;

Hai thuộc tính không được chỉ định sẽ đơn thuần được thiết lập tới giá trị mặc định mà chúng ta điều biết là scroll và top left.

» Tiếp: Cách dùng font « Trước: Ưu tiên (!important) Các khóa học qua video: Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript Học trên YouTube Đăng ký Hội viên Viết nhanh hơn - Học tốt hơnGiải phóng thời gian, khai phóng năng lực Copied !!! Copy linkCopied link!

Bạn muốn tìm kiếm điều gì?

×