Tìm hiểu cách tạo ảnh nền mờ bằng CSS
Làm mờ hình nền
Ghi chú. Ví dụ này không hoạt động trong Edge 12, IE 11 hoặc các phiên bản cũ hơn
Tự mình thử »
Cách tạo ảnh nền mờ
Bước 1] Thêm HTMLThí dụ
Tôi là John Doe
Và tôi là một nhiếp ảnh gia
Bước 2] Thêm CSS
Thí dụ
nội dung, html {
chiều cao. 100%;
}
* {
kích thước hộp. hộp viền;
}
hình ảnh bg {
/* Hình ảnh được sử dụng */
hình nền. url["nhiếp ảnh gia. jpg"];
/* Thêm hiệu ứng làm mờ */
lọc. làm mờ [8px];
-webkit-bộ lọc. làm mờ [8px];
/* Chiều cao đầy đủ */
chiều cao. 100%;
/* Căn giữa và chia tỷ lệ hình ảnh cho đẹp */
vị trí nền. trung tâm;
Bối cảnh Lặp lại. không lặp lại;
kích thước nền. che phủ;
}
/* Định vị văn bản ở giữa trang/hình ảnh */
bg-văn bản {
màu nền. rgb[0,0,0];
màu nền. rgba[0,0,0, 0. 4];
màu. trắng;
trọng lượng phông chữ. in đậm;
biên giới. 3px cố định #f1f1f1;
Chức vụ. tuyệt đối;
đứng đầu. 50%;
bên trái. 50%;
biến đổi. dịch[-50%, -50%];
chỉ số z. 2;
bề rộng. 80%;
đệm. 20px;
căn chỉnh văn bản. trung tâm;
}
Hàm blur[] là một hàm có sẵn được sử dụng để áp dụng bộ lọc hiệu ứng mờ trên hình ảnh.
cú pháp
blur[ radius ]
Thông số. Hàm này chấp nhận một tham số bán kính giữ bán kính mờ ở dạng chiều dài. Tham số này xác định giá trị của độ lệch chuẩn cho hàm Gaussian.
Một trong những hiệu ứng tốt nhất để cách điệu văn bản của bạn là làm cho văn bản trông mờ đi. Trong đoạn mã này, chúng tôi sẽ chỉ cho bạn hai phương pháp tạo văn bản mờ. Vì vậy, ở đây chúng tôi đi
Giải pháp với thuộc tính CSS text-shadow
Cách đầu tiên để tạo văn bản mờ là làm cho văn bản của bạn trong suốt và phủ bóng cho văn bản đó. Bóng sẽ làm cho văn bản bị mờ. Sử dụng một
với một id "mờ". Sau đó, đặt thuộc tính color thành giá trị “trong suốt” của nó và xác định thuộc tính text-shadow để tạo bóng cho văn bản
Vì vậy, đây là ví dụ. Bạn có thể tự mình thử
Ví dụ tạo văn bản mờ với thuộc tính text-shadow
Title of the document
Blurry Text
Kết quả
Nếu bạn muốn văn bản của mình trông mờ hơn hoặc mờ hơn, bạn có thể thay đổi giá trị bán kính mờ của thuộc tính text-shadow theo kích thước văn bản của bạn
Phương pháp này sẽ không hoạt động trong các trình duyệt không hỗ trợ thuộc tính text-shadow
Một cách khác là sử dụng thuộc tính bộ lọc CSS với giá trị “blur” của nó. Giá trị càng lớn, văn bản của bạn sẽ càng mờ
Ví dụ về tạo văn bản mờ với thuộc tính bộ lọc
Title of the document
Blurry Text
Bạn có thể thử các hiệu ứng làm mờ khác nhau, ví dụ: bạn có thể làm mờ một số chữ cái của văn bản và những chữ cái khác thì không
Để có hiệu ứng làm mờ, hãy sử dụng thuộc tính bộ lọc CSS, cho phép tạo các hiệu ứng như làm mờ hoặc chuyển màu trên một phần tử
Chức năng làm mờ của thuộc tính bộ lọc thêm độ mờ Gaussian vào hình ảnh đầu vào. Giá trị của bán kính chỉ định giá trị của độ lệch chuẩn cho hàm Gaussian hoặc số pixel trên màn hình hòa trộn với nhau để giá trị lớn hơn sẽ tạo ra nhiều mờ hơn. Nếu không có tham số nào được cung cấp thì giá trị 0 được sử dụng. Tham số được chỉ định dưới dạng độ dài CSS, nhưng không chấp nhận giá trị phần trăm
cú pháp
Để áp dụng hiệu ứng làm mờ cho ảnh nền, với chức năng làm mờ, sử dụng thuộc tính z-index để đặt thứ tự ngăn xếp của phần tử, đặt chiều rộng và chiều cao 100% để có ảnh nền đầy đủ. Đặt thuộc tính vị trí có giá trị tuyệt đối để định vị phần tử so với tổ tiên được định vị gần nhất
Làm mờ hậu cảnh thật thú vị. Đây là một thực tế không thể tranh cãi. Mỗi giao diện người dùng phải có ít nhất mười hiệu ứng làm mờ nền trong đó [tốt nhất là xếp chồng lên nhau] và mọi giao diện được tạo kể từ khi tạo world wide web mà không có hiệu ứng làm mờ nền phải được gắn cờ là nợ kỹ thuật có mức độ ưu tiên cao. Đây là sự thật. Các nhà phát triển yêu thích khi bạn cho họ xem các bằng chứng thiết kế với nền mờ. Điều này là sai
Đó là bởi vì làm mờ nền về cơ bản là không thể thực hiện trên các ứng dụng web, khiến các nhà thiết kế cảm thấy thất vọng, bị lừa dối và hoàn toàn vô dụng với tư cách là con người. Nhưng tất cả thay đổi ngày hôm nay. Chà, nó thực sự đã thay đổi vào năm 2018 hay gì đó và tôi vừa tìm thấy trang MDN, nhưng bạn hiểu rồi đó
Vì vậy, đây là cách tạo hiệu ứng mờ hậu cảnh bằng cách sử dụng thuộc tính CSS bộ lọc phông nền
backdrop-filter: blur[5px];
Đó là nó
Nếu bạn khăng khăng muốn đọc phần còn lại của bài viết, thì đây là chi tiết hơn một chút…
Bộ lọc phông nền là gì?Theo MDN, “Thuộc tính CSS backdrop-filter
cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho khu vực phía sau một phần tử. Bởi vì nó áp dụng cho mọi thứ phía sau phần tử, để thấy được hiệu ứng, bạn phải làm cho phần tử hoặc nền của nó ít nhất trong suốt một phần. ”
Trong trường hợp bạn đập nhãn cầu của mình vào một chiếc kéo trong nửa câu đầu tiên, về cơ bản, họ nói rằng nó hoạt động trong nhà phát triển giống hệt như nó hoạt động trong công cụ thiết kế mà bạn chọn [Figma, Sketch, Adobe XD, Framer, bất kỳ thứ gì khác
Bất cứ điều gì đằng sau sự mờ ảo...hãy trở nên mờ nhạt
Hãy làm một ví dụ đơn giảnBắt đầu bằng cách tạo một Được rồi, chúng ta hãy thưởng thức một ly cà phê xứng đáng và bánh muffin hạt chuối. Tự phủi bụi và sau đó thêm một số CSS vào lớp Bây giờ hãy thêm phần làm mờ. Chúng tôi sẽ lặng lẽ lẻn vào bên trong Đây là vòng phỏng vấn thứ 45 của Google. Hãy hoàn thành việc thay đổi trái tim và khối óc Chúng tôi sẽ làm cho lớp Nếu bạn muốn phần mờ có màu, bạn cần thêm thuộc tính nền có giá trị rgba. Đảm bảo rằng alpha [độ mờ] nhỏ hơn 1 để chúng ta có thể nhìn xuyên qua màu sắc Sau đó, chúng tôi sẽ thêm thuộc tính CSS Bây giờ bạn nên nhìn thẳng vào đỉnh cao của sự khéo léo và phát minh của con người. Bốn quả dứa bị nhòe đi một nửa. Nói một cách nghiêm túc, nó rất tuyệt Nếu bạn muốn thêm nhiều thuộc tính Đây là ví dụ Codepen của tôi hoàn chỉnh với hình ảnh động vô nghĩa và một nút để chuyển đổi lớp chứa nhiều thuộc tính Rõ ràng, bạn có thể trở nên khá sáng tạo với điều này. Nó đã được thử nghiệm trong một thời gian, vì vậy hãy đảm bảo kiểm tra tính tương thích của trình duyệt và tất cả những thứ quan trọng đó. Khi viết bài này, MDN cho biết mọi trình duyệt chính ngoại trừ Internet Explorer, Firefox cho Android và Samsung Internet đều sử dụng nó, vì vậy hãy viết một số dự phòng cho những trình duyệt đó. Gửi đến những anh hùng đã làm nên điều này, tôi xin chân thành cảm ơn. Bạn đã làm cho các bức ảnh Dribbble của chúng tôi có nhiều cơ hội được nhìn thấy ánh sáng ban ngày hơn Hy vọng bản tóm tắt cơ bản này về cách sử dụng .background
.background
. Chúng tôi sẽ thêm một số quả dứa đáng yêu và làm cho nó bao phủ toàn bộ trang.background
và nhẹ nhàng đặt một div với lớp .blur
.blur
của chúng tôi bao phủ toàn bộ chiều cao của cửa sổ nhưng chỉ bằng một nửa chiều rộng, để chúng tôi có thể thấy sự khác biệt sau khi áp dụng bộ lọcbackdrop-filter
huyền diệu và cung cấp cho nó giá trị là backdrop-filter
1. Gợi ý, gợi ý…tăng/giảm px để tăng/giảm độ mờbackdrop-filter
vào một phần tử, chỉ cần tách chúng bằng dấu cách. Hãy cẩn thận; . Vâng, bỏ dấu chấm phẩy trong bài viết đầu tiên trên Phương tiện của tôi. Có chuyện gì vậybackdrop-filter
backdrop-filter
để tạo hiệu ứng làm mờ hậu cảnh sẽ giúp ít nhất một người. Xin vui lòng bình luận với bất kỳ suy nghĩ, đề xuất hoặc ghét sâu sắc. Tôi đã có cho mình một Twitter, Dribbble và bạn có thể theo dõi tôi trên Phương tiện trong trường hợp tôi quyết định làm điều này một lần nữaLàm mờ hoạt động như thế nào trong CSS?
Tôi có thể làm mờ hình nền trong CSS không?
Chủ Đề