CSS nền minh bạch. nền trong suốt hoặc văn bản với CSS

Với sự ra đời của nhà thiết kế web CSS3 làm việc bằng nhiều cách đã trở nên dễ dàng và hợp lý hơn: sau khi tất cả, bạn có thể bây giờ thực sự linh hoạt tùy chỉnh bất kỳ đối tượng, ít thường xuyên phải dùng đến JavaScript. Hãy nói rằng bạn cần phải điều chỉnh tính minh bạch của nền - CSS ngay lập tức cung cấp một số tùy chọn.

Bối cảnh được xác định bởi một tập hợp các thuộc tính (background-image, background-position , background-size, background-repeat, background-attachment, background-xứ, background-clip, background-color), mỗi trong số đó có thể được gán riêng rẽ hoặc kết hợp dưới thuộc tính nền. Chúng ta hãy xem xét từng người cụ thể.

Thuộc tính background-color

Trong CSS, màu nền có thể được thiết lập bằng nhiều cách: sử dụng một mã hex, tên màu hoặc RGB-nhập cảnh. Trong CSS3 người ta có thể sử dụng thay vì lựa chọn RGB-thu âm với RGBA.

mã màu hex được ghi lại trong các tài sản sau khi mạng: background-color: # FFDAB9. Nếu các nhân vật trong mục này là những cặp cùng, mã thường là một chút cắt: # ccff00 có thể được viết như # cf0:

body {background-color: # cf0 ;}.

Tên là, ngay cả trong những màu sắc kỳ lạ nhất. Ví dụ, ngoài các tiêu chuẩn màu đỏ và trắng, bạn có thể sử dụng NavajoWhite (#FFDEAD) hoặc Honeydew2 (# E0EEE0):

body {background-color: màu tím; }.

Lựa chọn thứ hai là RGB hoặc RGBA entry cho phép bạn chỉ định không chỉ màu sắc mà còn là tính minh bạch của nền CSS, nhưng phương pháp này chỉ hoạt động trong các phiên bản IE cũ hơn 9. Các trình duyệt khác nhận ra phiên bản bình thường với tính minh bạch. Theo các tiêu chuẩn W3C nó là thích hợp hơn để sử dụng vẫn RGBA thay vì RGB thông thường hơn.

Giá trị cuối cùng trong nền RGBA và đặt opacity từ 0 (trong suốt) đến 1 (đục).

Có một số giá trị khác thường. Màu nền có thể được thiết lập bằng cách sử dụng HSL và HSLA. Cả hai đã được thêm vào CSS3, và do đó không được hỗ trợ bởi trình duyệt IE phiên bản 9 trở lên. Hiện thân RGB trùng hoặc RGBA, chỉ trong một định dạng khác nhau: Huế (bóng râm - giá trị trên bánh xe màu, được đưa ra trong độ), làm ướt (bão hòa - cường độ màu theo phần trăm, từ 0 đến 100), Lightness (nhẹ nhàng - độ sáng, độ đo tương tự như tham số bão hòa ).

Thuộc tính background-image

Phiên bản qua trình duyệt hầu hết các nền trong suốt - đây là việc sử dụng các hình ảnh. Trong CSS3, bạn có thể thiết lập nhiều hơn hình ảnh, điều này được thực hiện thông qua một dấu phẩy. Ví dụ:

{Image background-cơ thể: url (bg1.png), url (bg2.png)}.

Bằng cách này hỗ trợ thậm chí IE8. Một số hình ảnh trong bối cảnh của cao su được sử dụng trong cách bố trí. Quan trọng hơn, đừng quên sử dụng bất kỳ hình ảnh và thiết lập màu nền trong CSS, như người dùng chỉ có thể tải lên một hình ảnh.

Thuộc tính background-position

Nếu bạn sử dụng hình ảnh để thiết lập các đơn vị nền, CSS cho phép bạn định vị hình ảnh bất cứ nơi nào trên màn hình. Theo mặc định, hình ảnh nằm ở góc trên bên trái. Thuộc tính mất một trong hai hướng dẫn bằng lời nói (trên, dưới, trái, phải), một số (lãi suất, pixel và các đơn vị khác). Trong trường hợp này, bạn phải xác định hai giá trị, ngang và dọc:

body {background-position: Trung tâm đúng ;} - trong ví dụ này, mô hình sẽ được đặt ở phía bên phải của trang, phía trên và dưới của khoảng cách hình ảnh với cùng.

Thuộc tính background-kích thước

Đôi khi nó là cần thiết để mở rộng nền CSS hoặc giảm kích thước của nó. Để làm điều này, sử dụng thuộc tính background-kích thước, và kích thước của nền có thể được thiết lập bằng pixel hoặc phần trăm, và bất kỳ đơn vị khác.

Với thuộc tính này, có một số vấn đề: cho đúng màn hình của một nền trong các phiên bản trước đó của các tiền tố trình duyệt được sử dụng. Tất nhiên, phiên bản hiện tại hỗ trợ đầy đủ thuộc tính này và nhu cầu đối với tài sản cụ thể biến mất.

Thuộc tính background-attachment

Thuộc tính này quy định các hành vi của các hình ảnh nền trong khi di chuyển. Vì vậy, có thể mất 3 giá trị (không bao gồm kế thừa, tổng cho tất cả các thuộc tính được thảo luận trong bài viết này):

• cố định - làm cho hình ảnh trên nền cố định;
• di chuyển - cuộn nền với phần còn lại của các yếu tố;
• địa phương - hình ảnh trên nền là cuộn nếu di chuyển có nội dung. Bối cảnh mà đi vượt ra ngoài nội dung của khung là cố định.

Ví dụ về sử dụng:

body {background-attachment cố định}.

Hiện nay, Firefox không hỗ trợ tài sản cuối cùng (địa phương).

Thuộc tính background-nguồn gốc

Thuộc tính này có trách nhiệm cho các phần tử định vị. trình duyệt đầu đòi hỏi việc sử dụng các tiền tố. Tài sản riêng của mình có ba thông số:

• padding-hộp là vị trí tương đối so với các mô hình cạnh, trong khi có tính đến độ dày của khung;
• tính biên giới-box khác biệt so với trước đây trong đó các đường ranh giới có thể hoàn toàn hoặc một phần chồng chéo mô hình;
• nội dung hộp hình ảnh định vị pryavyazyvaya nội dung của nó.

Nếu bạn chỉ định nhiều giá trị, sau đó các trình duyệt có thể phản ứng theo cách riêng của họ: Firefox và Opera cảm nhận được chỉ là lựa chọn đầu tiên.

Thuộc tính background-repeat

Như một quy luật, nếu hình nền được chỉ định, nó phải được lặp đi lặp lại theo chiều ngang hoặc theo chiều dọc. Đối với điều này và sử dụng thuộc tính background-repeat. Như vậy, nền block, CSS, trong đó có một tài sản đó có thể có một vài thông số:

• no-repeat - hình ảnh xuất hiện trên một trang trong một phiên bản duy nhất;
• lặp lại - nền được lặp lại trong x và y;
• lặp lại-x - chỉ theo chiều ngang;
• lặp lại-y - chỉ theo chiều dọc;
• không gian - nền được lặp lại, nhưng nếu không gian là không thể để điền vào giữa những hình ảnh xuất hiện trống rỗng;
• tròn - hình ảnh được thu nhỏ lại, nếu nó không lấp đầy toàn bộ diện tích của toàn bộ hình ảnh.

Ví dụ về các thuộc tính:

body {background-repeat: không- lặp lại lặp lại} - tương tự background-repeat: repeat-y.

Trong CSS3 có thể chỉ định giá trị cho nhiều hình ảnh khi liệt kê các thông số, cách nhau bởi dấu phẩy.

Thuộc tính background-clip

Thuộc tính này xác định hành vi của các nền dưới ranh giới (ví dụ, trong trường hợp của các khung chấm):

• padding-ô - nền hiển thị trong nội thất của khối;
• biên giới-box - hình ảnh đi kèm theo khuôn khổ;
• nội dung hộp - bức tranh trên nền sẽ chỉ xuất hiện trong nội dung.

Ví dụ về sử dụng:

body {background-clip: trang nội dung hộp;}.

Chrom và Safari đòi hỏi tiền tố -webkit-.

thuộc tính Opacity và bộ lọc

thuộc tính opacity cho phép bạn thiết lập các tính minh bạch của nền - thuộc tính CSS sẽ làm việc trong tất cả các trình duyệt. Giá trị được đặt trong khoảng 0,0-1,0 toàn diện. Trong trường hợp này, bạn có thể thiết lập tính minh bạch của nền CSS không có giá trị số nguyên thay vì 0.3 là đủ để viết .3:

.block {background-image: url ( img.png); opacity: 0,3;}.

Để thiết lập opacity nền, CSS là phù hợp ngay cả đối với IE dưới phiên bản thứ chín, sử dụng thuộc tính lọc:

.block {background-image: url ( img.png); lọc: alpha (opacity = 30)}.

Trong trường hợp này, giá trị opacity được thiết lập giữa 0 và 100. Lưu ý rằng thuộc tính opacity thiết lập tính minh bạch khác nhau thông qua RGBA thừa kế: khi sử dụng opacity trở nên rõ ràng không chỉ nền, mà còn tất cả các yếu tố bên trong đơn vị.

Luôn theo dõi thống kê sử dụng cho các trình duyệt CIS và tất cả các nước khác. Vấn đề lớn nhất của tất cả các DTP - phiên bản cũ của trình duyệt IE, họ không cho phép bạn sử dụng trong phạm vi CSS3 đầy đủ. Trong bố trí đừng quên sử dụng các dịch vụ đặc biệt mà kiểm tra xem trình duyệt của bạn hỗ trợ bất cứ tài sản CSS. Nếu bạn không thể cài đặt phiên bản cũ của trình duyệt, hãy tìm một dịch vụ mà sẽ kiểm tra việc trang web trong nhiều trình duyệt trực tuyến.