Hướng dẫn can you blur background in css? - bạn có thể làm mờ nền trong css?

Question

Tìm hiểu cách tạo hình nền mờ với CSS.

Nội dung chính Show

Hình ảnh nền mờ
Cách tạo hình nền mờ
I am John Doe
Làm cách nào để làm mờ nền của văn bản trong CSS?
Làm thế nào để bạn làm mờ các yếu tố trong CSS?
Làm thế nào để bạn làm mờ nền?
Bộ lọc nào làm mờ nền?

Hình ảnh nền mờ

LƯU Ý: Ví dụ này không hoạt động trong các phiên bản cạnh 12, tức là 11 hoặc trước đó. This example does not work in Edge 12, IE 11 or earlier versions.

Hãy tự mình thử »

Cách tạo hình nền mờ

Bước 1) Thêm HTML:

Thí dụ

& nbsp; Tôi là John Doe & NBSP; Và tôi là một nhiếp ảnh gia

I am John Doe

And I'm a Photographer

Bước 2) Thêm CSS:

Thí dụ

body, html {
height: 100%;
}

& nbsp; Tôi là John Doe & NBSP; Và tôi là một nhiếp ảnh gia
box-sizing: border-box;
}

Bước 2) Thêm CSS:
/* The image used */
background-image: url("photographer.jpg");

cơ thể, html {& nbsp; Chiều cao: 100%;}
filter: blur(8px);
-webkit-filter: blur(8px);

* {& nbsp; Kích thước hộp: Border-Box;}
height: 100%;

.BG-IMAGE {& nbsp; / * Hình ảnh được sử dụng */& nbsp; Hình ảnh nền: URL ("Nhiếp ảnh gia.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

& nbsp; / * Thêm hiệu ứng mờ */& nbsp; Bộ lọc: Blur (8px); & nbsp; -Webkit bộ lọc: Blur (8px);
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}

Hãy tự mình thử »

Để có hiệu ứng mờ, sử dụng thuộc tính bộ lọc CSS, cho phép có các hiệu ứng như mờ hoặc chuyển màu trên một phần tử.

Chức năng 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 đối với hàm Gaussian hoặc có bao nhiêu 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 là độ dài CSS, nhưng không chấp nhận các giá trị phần trăm.blur function of the filter property adds a Gaussian blur to the input image. The value of radius specifies the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other so that a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

Cú pháp

Để áp dụng hiệu ứng mờ cho hình nền, với hà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ó hình nền đầy đủ. Đặt thuộc tính vị trí với giá trị tuyệt đối để định vị phần tử so với tổ tiên có vị trí gần nhất.

Thí dụ

html>
<html>
  <head>
    <title>Title of the document title>
    <style>
      img.background {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
      width: 100%;
      height: 100%;
      -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
      filter: blur(5px);
      }
    style>
  head>
  <body>
    <h2>Blurred backgroundh2>
    <img class="background" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
    <p><strong>Note:strong> The filter property is not supported in Internet Explorer, Safari 5.1 and earlier versions.p>
  body>
html>

Bạn cũng có thể áp dụng một hình ảnh nền mờ cho hình ảnh khác. Để sử dụng, hãy xem ví dụ dưới đây:

Thí dụ

html>
<html>
  <head>
    <title>Title of the document title>
    <style>
      img.background {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
      width: 100%;
      height: 100%;
      -webkit-filter: blur(10px); /* Safari 6.0 - 9.0 */
      filter: blur(10px);
      }
      img.circle {
      display: block;
      max-width: 60%;
      height: auto;
      margin: 0 auto;
      border-radius: 50%;
      }
    style>
  head>
  <body>
    <h2>Blurred backgroundh2>
    <p><strong>Note:strong> The filter property is not supported in Internet Explorer, Safari 5.1 and earlier versions.p>
    <img class="background" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
    <img class="circle" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
  body>
html>
COPY TO CLIPBOARD	 SELECT ALL

Làm cách nào để làm mờ nền của văn bản trong CSS?

Giải pháp với thuộc tính CSS Text-Shadow Shadow sẽ làm cho văn bản xuất hiện mờ. Sử dụng A với ID "Blur". Sau đó, đặt thuộc tính màu thành giá trị trong suốt của nó và xác định thuộc tính Shadow văn bản để tạo bóng cho văn bản.Use a

with an id "blur". Then, set the color property to its “transparent” value and define the text-shadow property to give a shadow to the text.

Làm thế nào để bạn làm mờ các yếu tố trong CSS?

Chức năng Blur () mờ () CSS áp dụng độ mờ Gaussian cho hình ảnh đầu vào.Kết quả của nó là a. The blur() CSS function applies a Gaussian blur to the input image. Its result is a .

Làm thế nào để bạn làm mờ nền?

Làm thế nào để làm mờ nền trong ảnh trực tuyến ?..

Tải lên ảnh bạn muốn chỉnh sửa với công cụ hiệu ứng Blur của Fotor ..

Đi đến độ nghiêng và chọn các chế độ mờ phù hợp trước khi làm mờ hình ảnh của bạn ..

Áp dụng hiệu ứng mờ, thay đổi cường độ mờ hình ảnh của bạn ..

Lưu công việc của bạn, chọn định dạng và kích thước bạn muốn ..

Bộ lọc nào làm mờ nền?

Facetune có thể giúp bạn làm mờ nền của ảnh của bạn.Cùng với các công cụ thay thế nền một chạm, bạn có thể thử các kiểu nghệ thuật và bộ lọc trên ảnh của mình.Bạn có thể chọn chủ đề và làm mờ chỉ nền và đặt cường độ của hiệu ứng làm mờ cho một bức tranh kiểu chuyên nghiệp trong vài giây.artistic styles and filters on your photos. You get to choose the subject and blur just the background and set the intensity of the blurring effect for a professional-style picture in seconds.

programming css backdrop-filter Blur CSS Blur background color Filter blur tailwind Blur background Zoom Filter CSS Blur 10px

Hướng dẫn can you blur background in css? - bạn có thể làm mờ nền trong css?

Hình ảnh nền mờ

Cách tạo hình nền mờ

Bước 1) Thêm HTML:

Thí dụ

I am John Doe

Bước 2) Thêm CSS:

Thí dụ

Cú pháp

Làm cách nào để làm mờ nền của văn bản trong CSS?

Làm thế nào để bạn làm mờ các yếu tố trong CSS?

Làm thế nào để bạn làm mờ nền?

Bộ lọc nào làm mờ nền?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội