Để cung cấp cho phần tử một nền gradient tuyến tính, hãy sử dụng một trong các tiện ích
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
5, kết hợp với các tiện ích dừng màu gradient
Áp dụng có điều kiện
Hover, focus và các trạng thái khác
Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
6 để chỉ áp dụng tiện ích filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
7 khi di chuộtĐể biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States
Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
8 để áp dụng tiện ích filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
7 chỉ với kích thước màn hình trung bình trở lênĐể tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng, Chế độ tối và các công cụ sửa đổi truy vấn phương tiện khác
Sử dụng các giá trị tùy chỉnh
Tùy chỉnh chủ đề của bạn
Theo mặc định, Tailwind bao gồm các tiện ích hình nền để tạo nền chuyển màu tuyến tính theo tám hướng
Bạn có thể thêm hình nền của riêng mình bằng cách chỉnh sửa phần
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
0 trong tệp filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
1 của bạnmodule.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
Chúng không nhất thiết phải là chuyển sắc - chúng có thể là bất kỳ hình nền nào bạn cần
Tìm hiểu thêm về cách tùy chỉnh chủ đề mặc định trong tài liệu tùy chỉnh chủ đề
Giá trị tùy ý
Nếu bạn cần sử dụng giá trị
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
2 một lần không hợp lý để đưa vào chủ đề của mình, hãy sử dụng dấu ngoặc vuông để tạo nhanh một thuộc tính bằng cách sử dụng bất kỳ giá trị tùy ý nàoBài đăng này ban đầu được xuất bản vào ngày 21 tháng 8 năm 2009 và hiện được cập nhật vì nó đã được sửa đổi hoàn toàn. Cả hai phương thức ban đầu đều bị xóa và hiện được thay thế bằng bốn phương thức mới
Mục tiêu ở đây là hình nền trên trang web bao phủ toàn bộ cửa sổ trình duyệt mọi lúc. Hãy đặt một số chi tiết cụ thể về nó
- Lấp đầy toàn bộ trang bằng hình ảnh, không có khoảng trắng
- Tỷ lệ hình ảnh khi cần thiết
- Giữ nguyên tỷ lệ hình ảnh [tỷ lệ khung hình]
- Hình ảnh được căn giữa trên trang
- Không gây ra thanh cuộn
- Tương thích với nhiều trình duyệt nhất có thể
- Không phải là một số shenanigans ưa thích như Flash
Cách CSS tuyệt vời, dễ dàng, tiến bộ
Chúng tôi có thể làm điều này hoàn toàn thông qua CSS nhờ thuộc tính
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
3 hiện có trong CSS. Chúng tôi sẽ sử dụng phần tử filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
4 [tốt hơn filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
5 vì nó luôn có chiều cao ít nhất bằng cửa sổ trình duyệt]. Chúng tôi đặt nền cố định và căn giữa trên đó, sau đó điều chỉnh kích thước của nó bằng cách sử dụng filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
3 được đặt thành từ khóa trang bìahtml {
background: url[images/bg.jpg] no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
hoạt động trong
- Safari 3+
- Chrome Sao cũng được +
- IE9+
- Opera 10+ [Opera 9. 5 kích thước nền được hỗ trợ nhưng không hỗ trợ từ khóa]
- firefox 3. 6+ [Firefox 4 hỗ trợ phiên bản có tiền tố không phải của nhà cung cấp]
Xem bản trình diễn
Cập nhật. Cảm ơn Goltzman trong các nhận xét đã chỉ ra một bài viết về Kết nối nhà phát triển Adobe có một số mã để làm cho IE cũng có nền
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
Nhưng hãy cẩn thận, độc giả Pierre Orsander cho biết họ đã thử cách này và gặp một số vấn đề với các liên kết trên trang bị chết
Cập nhật. Matt Litherland viết thư để nói rằng bất kỳ ai đang cố gắng sử dụng các bộ lọc IE ở trên và gặp sự cố với thanh cuộn hoặc liên kết chết hoặc bất kỳ thứ gì khác [như Pierre ở trên] nên cố gắng không sử dụng chúng trên phần tử
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
4 hoặc filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
5. Nhưng thay vào đó, một div vị trí cố định với 100% chiều rộng và chiều caoKỹ thuật chỉ CSS #1
Như thường lệ, xin chân thành cảm ơn Doug Neiner về phiên bản thay thế này. Ở đây, chúng tôi sử dụng một phần tử nội tuyến, có thể thay đổi kích thước trong bất kỳ trình duyệt nào. Chúng tôi đặt một
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
9 để giữ cho nó lấp đầy cửa sổ trình duyệt theo chiều dọc và đặt một 100% module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
10 để giữ cho nó lấp đầy theo chiều ngang. Chúng tôi cũng đặt một module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
11 chiều rộng của hình ảnh để hình ảnh không bao giờ nhỏ hơn thực tếĐiều đặc biệt thông minh là sử dụng truy vấn phương tiện để kiểm tra xem cửa sổ trình duyệt có nhỏ hơn hình ảnh hay không và sử dụng kết hợp tỷ lệ phần trăm bên trái và bên trái âm
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
12 để giữ cho cửa sổ ở giữa bất kểĐây là CSS
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
1hoạt động trong
- Bất kỳ phiên bản nào của trình duyệt tốt. Safari/Chrome/Opera/Firefox
- IE6. Bị hỏng – nhưng có thể sửa được nếu bạn sử dụng một số loại miếng chêm định vị cố định
- TỨC LÀ 7/8. Hầu hết hoạt động, không căn giữa ở kích thước nhỏ nhưng lấp đầy màn hình tốt
- IE9. Làm
Xem bản trình diễn
Kỹ thuật chỉ CSS #2
Một cách khá đơn giản để xử lý việc này là đặt một hình ảnh nội tuyến trên trang, cố định vị trí của nó ở phía trên bên trái và cung cấp cho nó 100%
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
11 và filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
9, giữ nguyên tỷ lệ khung hình của nómodule.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
7____18Tuy nhiên, điều này không căn giữa hình ảnh và đó là một mong muốn khá phổ biến ở đây… Vì vậy, chúng ta có thể khắc phục điều đó bằng cách bao hình ảnh trong một div. Div đó chúng ta sẽ làm lớn gấp đôi cửa sổ trình duyệt. Sau đó, hình ảnh sẽ được đặt, vẫn giữ nguyên tỷ lệ khung hình của nó và bao phủ cửa sổ trình duyệt có thể nhìn thấy cũng như tâm điểm chết của hình ảnh đó
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
9filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
0Tín dụng cho Corey Worrell cho khái niệm này
hoạt động trong
- Safari/Chrome/Firefox [không test xa lắm, nhưng các bản gần đây vẫn ổn]
- IE8+
- Opera [bất kỳ phiên bản nào] và IE đều bị lỗi theo cùng một cách [đặt sai vị trí, không biết tại sao]
- Peter VanWylen đã viết để nói rằng nếu bạn thêm hình ảnh qua JavaScript, img cần phải có chiều rộng. Tự động; . Tự động;
Xem bản trình diễn
Cập nhật tháng 1 năm 2018. Bạn đang cố gắng để tính năng này hoạt động trên Android? . 100%; . ẩn giấu; . Đoạn trích đầy đủ là
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
1Tôi đã kiểm tra nó, và nó có vẻ hoàn toàn chính xác. Không có nó / Với nó
phương pháp jQuery
Toàn bộ ý tưởng này trở nên dễ dàng hơn rất nhiều [từ góc độ CSS] nếu chúng ta biết liệu tỷ lệ khung hình của hình ảnh [nội tuyến
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
15 mà chúng ta định sử dụng làm nền] lớn hơn hay nhỏ hơn tỷ lệ khung hình hiện tại của cửa sổ trình duyệt. Nếu nó thấp hơn, chúng ta chỉ có thể đặt module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
10 thành 100% trên hình ảnh và biết rằng nó sẽ lấp đầy cả chiều cao và chiều rộng. Nếu nó cao hơn, chúng tôi chỉ có thể đặt module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
17 thành 100% và biết rằng nó sẽ lấp đầy cả chiều cao và chiều rộngChúng tôi có quyền truy cập vào thông tin này thông qua JavaScript. Như thường lệ ở đây, tôi thích dựa vào jQuery
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
5filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
6filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
0Điều này không tính đến việc căn giữa, nhưng bạn chắc chắn có thể thay đổi điều này để làm điều đó. Tín dụng cho Koen Haarbosch cho khái niệm đằng sau ý tưởng này
hoạt động trong
- IE7+ [có thể vào IE6 với miếng chêm vị trí cố định]
- Hầu hết mọi trình duyệt máy tính để bàn khác
Xem bản trình diễn
Cập nhật [tháng 6 năm 2012]. Độc giả Craig Manley viết bằng kỹ thuật tải ảnh nền có kích thước phù hợp theo màn hình. Như trong, không tải một số hình nền rộng 1900px cho iPhone
Trước tiên, bạn sẽ tạo các hình ảnh như
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
18, module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
19, module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
70, v.v. Sau đó, thay vì tải một hình ảnh, bạn sẽ tải một shimfilter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
1Nếu bạn không thích gif shim [cá nhân tôi nghĩ nó ổn vì nó không phải là "nội dung" mà là nền], bạn có thể tải lên một trong những hình ảnh thực để thay thế. Mã này sẽ giải thích cho điều đó
Sau đó, bạn kiểm tra chiều rộng màn hình và đặt
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
71 của hình ảnh dựa trên nó. Đoạn mã dưới đây thực hiện thay đổi kích thước, điều mà bạn có thể muốn hoặc không muốn. Bạn chỉ có thể chạy mã một lần nếu bạn muốnfilter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";
2Lưu ý rằng chiều rộng màn hình không phải là thông tin tốt duy nhất có thể có khi chọn kích thước hình ảnh. Xem bài viết này
Vui thích
Nếu bạn sử dụng nó, xin vui lòng để lại kỹ thuật bạn đã sử dụng và nếu bạn thay đổi nó theo bất kỳ cách nào trong phần bình luận bên dưới. Luôn luôn mát mẻ để xem các kỹ thuật “trong tự nhiên. ”
Tải tập tin
Vì lợi ích của hậu thế, có một ví dụ khác ở đây có tên là
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url['/img/hero-pattern.svg']",
'footer-texture': "url['/img/footer-texture.png']",
}
}
}
}
72 sử dụng một kỹ thuật cũ đã từng là một phần của bài viết này. Nó có một chút thông minh, nhưng không hoàn toàn tốt bằng một trong hai kỹ thuật CSS được trình bày ở trên