Thiết Lập Nền Background-size, Background-clip CSS

Trang chủ

• PHP
• Liên hệ

• HTML
• CSS
• JavaScript
• PHP
• Server
• Java
• Tri thức
• SQL

• Liên hệ

Cascading Style Sheets (CSS) LÀM QUEN VỚI CSS - ĐỊNH DẠNG TEXT § 1 Khái quát về CSS § 2 Cú pháp viết CSS § 3 Selector CSS § 4 color - Màu chữ § 5 font-family - Font chữ § 6 font-(size, weight, style) - Cỡ chữ, kiểu chữ § 7 text-transform - Chữ in hoa, in thường § 8 text-shadow - Đổ bóng chữ § 9 text-decoration - Gạch chân, kẻ ngang § 10 text-align - Căn lề § 11 line-height - Giãn dòng § 12 letter-spacing / word-spacing - Khoảng cách chữ § 13 white-space - Khoảng trắng § 14 Kiểu danh sách (list) § 15 Định dạng liên kết link § 16 Đơn vị dài CSS (CSS) BỐ CỤC VỚI CSS § 17 Mô hình box css § 18 padding - Khoảng padding § 19 border - Đường viền § 20 Bo góc § 21 margin - Khoảng margin § 22 width, height - Rộng và cao § 23 Thuộc tính display § 24 Thuộc tính visibility § 25 Màu nền, ảnh nền § 26 Thiết lập nền § 27 background - Tô nền phần tử § 28 Thuộc tính overflow § 29 Thuộc tính text-overflow § 30 Thuộc tính float § 31 Thuộc tính clear § 32 Thuộc tính position § 33 left, top, bottom, right § 34 Thuộc tính z-index § 35 Định dạng bảng (CSS) CSS NÂNG CAO § 36 Thiết lập con trỏ chuột § 37 CSS3 - Giới thiệu § 38 CSS3 - Bóng đổ § 39 CSS3 - Màu trong suốt § 40 Chọn theo pseudo-class § 41 Chọn theo pseudo-element § 42 CSS3 - word-wrap § 43 CSS3 - linear gradient § 44 CSS3 - radial gradient § 45 CSS3 - thiết lập trong suốt § 46 Hệu ứng chuyển đổi § 47 Hệu ứng biến hình § 48 Hiệu ứng chuyển động § 49 Thuộc tính filter § 50 Quy tắc @font-face § 51 FlexBox § 52 Grid § 53 @media CHỦ ĐỀ KHÁC § 54 BOOTSTRAP CSS FRAMEWORK § 55 SASS / SCSS § 56 GRUNT biên dịch SASS

• Lập trình PHP
  • PSR
  • Laminas
  • SPL
  • Xenforo
  • Zend Framework
• Lập trình ứng dụng iOS - Swift
• Ruby
  • Sketchup
• Lập trình Dart - Flutter
• Lập trình C# (C Sharp)
  • Lập trình C# Cơ bản
• Server
  • MySql Server
  • Windows
  • Apache
  • PHP
• HTML
• Javascript
  • JQuery
  • TypeScript - Angular
• CSS
  • Sử dụng SASS / SCSS
  • Bootstrap - CSS Framework
• SQL
  • SQL Server ( .NET Framework - C#)
  • MS Access
• Java
  • Android Java
• Thuật ngữ - Các vấn đề cơ bản
• Tools
  • Git và GitHub
  • Kubernetes
  • Mathematica
  • SSH - Secure Shell
  • Grunt
  • Elasticsearch
  • Docker
  • macOS
  • English Study
• Tin tức công nghệ
• Tri thức & Khoa học
  • Yoga

• CSS

Màu nền, ảnh nền (Bài trước) (Bài tiếp) background - Tô nền phần tử Thiết lập nền background-size background-clip CSS

Thiết lập tô nền với các thuộc tính trong CSS là background-size để điều chỉnh cỡ ảnh làm nền, background-clip chỉ ra vùng tô nền, background-position để thiết lập vị trí ảnh nền trong box, thiết lập tọa độ gốc ảnh nền background-origin

Điều chỉnh cỡ ảnh làm nền với - background-size

Thuộc tính background-size cho phép điều chỉnh kích thước của các ảnh làm nền. Cú pháp cơ bản là:

background-size: width height;

Trong cú pháp thì width, height là kích thước điều chỉnh ảnh nền, có thể thiết lập các giá trị:

chiều dài: (theo đơn vị chiều dài trong CSS ví dụ 100px, 20mm ...), cho biết kích thước ảnh gốc sẽ được thu / phỏng về kích thước mới để làm nền. Ví dụ:

background-size: 50px 60mm;

phần trăm: Điều chỉnh ảnh về kích thước chiếm số phần trăm bao nhiêu phần không gian nền của phần tử. Ví dụ:

background-size: 100% 50px;

auto: Nếu nhận một giá trị auto, còn giá trị kia chỉ rõ. Thì chiều ảnh có giá trị auto tự động tính toán theo tỷ lệ ban đầu của ảnh. Ví dụ: Chiều rộng thu về 100px, chiều cao điều chỉnh sao cho đúng tỷ lệ ảnh ban đầu

background-size: 100px auto;

contain

background-size: contain;

Trường hợp viết cú pháp như trên, ảnh sẽ thu phóng sao toàn bộ ảnh đặt vừa lọt trong vào khu vực nền của phần tử.

cover

background-size: cover;

Ảnh nền sẽ thu/phóng sao cho phủ kín hết toàn bộ nền.

chú ý

• Có thể chỉ nhập một giá trị chiều dài hoặc phần trăm, trong trường hợp đó thì giá trị thứ 2 tự động là auto. Ví dụ viết background-size: 100px; thì có nghĩa là background-size: 100px auto;
• background-size: auto; đây là giá trị mặc định, ảnh giữ nguyên như ảnh gốc

Ví dụ minh họa sẽ lấy ảnh tại link 1338460.jpg để thực hiện, ảnh này có kích thước 330x439px

<style> .bg1 { height: 300px; width: 300px; background-color: orangered; background-repeat: no-repeat; background-image: url("https://images.freeimages.com/images/previews/ecb/colorful-tulips-1338460.jpg"); background-size: contain; } </style> <div class="bg1"></div> background-size: contain background-size: auto; background-size: 150px 250px background-size: 70% auto background-size: cover background-size: 100% 100%

Vị trí ảnh làm nền - background-position

Thuộc tính background-position thiết lập vị trí của ảnh nền trong hệ tọa độ của phần tử. Cú pháp cơ bản là:

background-position: px py;

Trong đó px py là tọa độ góc thứ nhất nhất của ảnh nó có thể nhận các giá trị: top, left, bottom, right, center, chiều dài, phần trăm

• top, left, bottom, right, center

  Ví dụ:

  // ảnh ở đáy, nằm giữa theo chiều đứng background-position: bottom center; background-size: 200px auto; // ảnh giữa phần tử background-position: center; background-size: contain;

• chiều dài (điểm tọa độ tương đối trong box phần tử)

  Ví dụ:

  background-position: -100px 40px; background-size: 200px auto;

• phần trăm (điểm tọa độ tương đối trong box phần tử)

  Ví dụ:

  background-position: 50% 70%; background-size: 200px auto;

Vùng tô nền - background-clip

Thuộc tính background-clip chỉ ra vùng vẽ của nền. Nó có thể nhận các giá trị:

• border-box mặc định, nền vẽ ngoài biên viền.
• padding-box nền vẽ cả ở vùng padding (không viền)
• content-box nền chỉ vẽ ở vùng nội dung phần tử

Ví dụ:

border: 10px dashed #3f51b582; padding: 20px; background-position: center; background-size: cover; background-clip: border-box; background-clip: border-box background-clip: padding-box background-clip: content-box

Gốc của vùng nền - background-origin

Thuộc tính này thiết lập gốc xác định ảnh nền, cú pháp như sau:

background-origin: box

Trong đó box nhận các giá trị: padding-box, border-box, content-box

border: 20px dashed #3f51b582; padding: 20px; background-position: 0 0; background-size: auto; background-origin: border-box; background-origin: border-box background-origin: padding-box background-origin: content-box Mục lục bài viết Cỡ ảnh nềnVị trí ảnh làm nềnbackground-clipbackground-origin ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới Quy tắc @media trong CSS với thiết kế responsive Sử dụng Grid bố cục trang trong CSS Thuộc tính transition biến đổi động các thuộc tính CSS Các thuộc tính left top right bottom trong CSS Thuộc tính text-overflow trong CSS Tạo ra Radial Gradient bằng CSS Tạo ra Linear Gradient với CSS Quy tắc @font-face nạp font mới trong CSS Thuộc tính word-wrap CSS3 Lựa chọn theo pseudo-element trong CSS Màu nền, ảnh nền (Bài trước) (Bài tiếp) background - Tô nền phần tử Giới thiệuPrivacyTừ điển Anh - ViệtChạy SQLRegExpCubic-bezierUnix timestampKý tự HTMLcalories, chỉ số BMRchỉ số khối cơ thể BMITạo QR CodeLịch vạn niên Liên hệ RSS

Đây là blog cá nhân, tôi ghi chép và chia sẻ những gì tôi học được ở đây về kiến thức lập trình PHP, Java, JavaScript, Android, C# ... và các kiến thức công nghệ khác Developed by XuanThuLab