Chế độ pha trộn nền là một thuộc tính CSS thiết lập sự pha trộn của hình ảnh nền hoặc màu nền. Đọc về các giá trị và thử các ví dụ.

Bạn đang xem : chế độ hòa trộn nền css

Chế độ hòa trộn nền là một thuộc tính CSS xác định sự hòa trộn của ảnh nền với nhau và với background-color . Nó có 10 giá trị: bình thường, nhân, màn hình, lớp phủ, làm tối, làm sáng, tránh màu, độ bão hòa, màu sắc, độ sáng. Giá trị mặc định là bình thường.

Nếu có một số lớp nền và chúng có một danh sách cụ thể của các chế độ hòa trộn, chế độ hòa trộn nền sẽ được áp dụng theo thứ tự như hình ảnh nền. Nếu không có đủ giá trị để khớp với số lớp, danh sách giá trị phải được lặp lại cho đến khi đủ.

Đối với các phần tử hòa trộn, thuộc tính chế độ hòa trộn nền có thể được sử dụng.

Giá trị ban đầu
thông thường

Áp dụng cho
Tất cả các yếu tố. Nó cũng áp dụng cho :: chữ cái đầu tiên :: chữ cái đầu tiên .

Được kế thừa
Không.

Hoạt hình
Không.

Phiên bản
CSS3
Cú pháp DOM
object.style.backgroundBlendMode = “luminosity”;

Cú pháp

  

background

-blend-mode: bình thường | nhân lên | màn hình | lớp phủ | làm tối | làm sáng | né tránh màu sắc | bão hòa | màu sắc | độ sáng;

Ví dụ của thuộc tính

background-blend-mode

:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

style

& gt;

div

{

width

:

400px

;

height

:

400px

;

background-repeat

: không lặp lại, lặp lại;

background-image

:

url

(

"/ build / images / w3docs-logo-black.png "

),

url

(

" / uploads / media / default / 0001 / 02 / 9ced3f2aae55e225cc0737bdb533a274bd004420.png "

);

background

-blend-mode: normal;

background-size

:

280px

;

background-position

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Trong ví dụ sau, hãy thử và xem cách kết hợp các hình ảnh nền:

Ví dụ về Thuộc tính

background-blend-mode

với giá trị “screen”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

style

& gt;

div

{

width

:

400px

;

height

:

400px

;

background-repeat

: không lặp lại, lặp lại;

background-image

:

url

(

"/ build / images / w3docs-logo-black.png "

),

url

(

" / uploads / media / default / 0001 / 02 / 9ced3f2aae55e225cc0737bdb533a274bd004420.png "

);

background

-blend-mode: screen;

background-size

:

280px

;

background-position

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ thuộc tính

background-blend-mode

với giá trị “color-dodge”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

style

& gt;

div

{

width

:

400px

;

height

:

400px

;

background-repeat

: không lặp lại, lặp lại;

background-image

:

url

(

"/ build / images / w3docs-logo-black.png "

),

url

(

" / uploads / media / default / 0001 / 02 / 9ced3f2aae55e225cc0737bdb533a274bd004420.png "

);

background

-blend-mode: color-dodge;

background-size

:

280px

;

background-position

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về Thuộc tính

background-blend-mode

với giá trị “nhân”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

style

& gt;

div

{

width

:

400px

;

height

:

400px

;

background-repeat

: không lặp lại, lặp lại;

background-image

:

url

(

"/ build / images / w3docs-logo-black.png "

),

url

(

" / uploads / media / default / 0001 / 02 / 9ced3f2aae55e225cc0737bdb533a274bd004420.png "

);

background

-blend-mode: nhân lên;

background-size

:

280px

;

background-position

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về Thuộc tính

background-blend-mode

với giá trị “overlay”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

style

& gt;

div

{

width

:

400px

;

height

:

400px

;

background-repeat

: không lặp lại, lặp lại;

background-image

:

url

(

"/ build / images / w3docs-logo-black.png "

),

url

(

" / uploads / media / default / 0001 / 02 / 9ced3f2aae55e225cc0737bdb533a274bd004420.png "

);

background

-blend-mode: overlay;

background-size

:

280px

;

background-position

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về Thuộc tính

background-blend-mode

với giá trị “darken”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

style

& gt;

div

{

width

:

400px

;

height

:

400px

;

background-repeat

: không lặp lại, lặp lại;

background-image

:

url

(

"/ build / images / w3docs-logo-black.png "

),

url

(

" / uploads / media / default / 0001 / 02 / 9ced3f2aae55e225cc0737bdb533a274bd004420.png "

);

background

-blend-mode: darken;

background-size

:

280px

;

background-position

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về Thuộc tính

background-blend-mode

với giá trị “saturation”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

style

& gt;

div

{

width

:

400px

;

height

:

400px

;

background-repeat

: không lặp lại, lặp lại;

background-image

:

url

(

"/ build / images / w3docs-logo-black.png "

),

url

(

" / uploads / media / default / 0001 / 02 / 9ced3f2aae55e225cc0737bdb533a274bd004420.png "

);

background

-blend-mode: saturation;

background-size

:

280px

;

background-position

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Giá trị


Xem thêm những thông tin liên quan đến chủ đề chế độ hòa trộn nền css

How to use mix-blend-mode, and how to avoid problems with it

  • Tác giả: Kevin Powell
  • Ngày đăng: 2021-06-29
  • Đánh giá: 4 ⭐ ( 8280 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: You don’t hear a lot about mix-blend-mode, but after mentioning it in a previous video, a lot of people asked for something more in-depth, so here we are!

    🔗 Links
    ✅ First codepen: https://codepen.io/kevinpowell/pen/dyvEBpj
    ✅ Second codpen: https://codepen.io/kevinpowell/pen/3cf5d075a29e2d702c02ee7387d516c2
    ✅ MDN information on it: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
    ✅ Ana Tudor CodePen I mentioned: https://codepen.io/thebabydino/pen/dyOvmRY
    ✅ Ana Tudor’s CSS-Tricks article: https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
    ✅ background-blend-mode video: https://www.youtube.com/watch?v=-c94pr41jaI

    ⌚ Timestamps
    00:00 – Introduction
    01:39 – The basics of mix-blend-mode
    05:25 – Issues with text
    08:29 – Using isolation
    09:56 – opacity vs mix-blend-mode
    11:50 – more on isolation

    css

    Come hang out with other dev’s in my Discord Community
    💬 https://discord.gg/nTYCvrK

    Keep up to date with everything I’m up to
    ✉ https://www.kevinpowell.co/newsletter

    Come hang out with me live every Monday on Twitch!
    📺 https://www.twitch.tv/kevinpowellcss

    Help support my channel
    👨‍🎓 Get a course: https://www.kevinpowell.co/courses
    👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
    💖 Support me on Patreon: https://www.patreon.com/kevinpowell

    My editor: VS Code – https://code.visualstudio.com/

    I’m on some other places on the internet too!

    If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

    Twitter: https://twitter.com/KevinJPowell
    Codepen: https://codepen.io/kevinpowell/
    Github: https://github.com/kevin-powell

    And whatever you do, don’t forget to keep on making your corner of the internet just a little bit more awesome!

Cách hiển thị văn bản trên hình ảnh với chế độ hòa trộn CSS3 / Mã hóa

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 5 ⭐ ( 1552 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hình nền trông tuyệt vời đằng sau văn bản hiển thị lớn. Tuy nhiên, việc thực hiện CSS của nó không đơn giản như vậy. Chúng tôi có thể sử dụng clip nền

[CSS] Thủ thuật thêm filter màu cho background image

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 2955 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể áp dụng filter cho toàn bộ phần tử HTML khá dễ dàng với thuộc tính filter. Nhưng điều gì sẽ xảy ra nếu bạn muốn áp dụng bộ lọc chỉ cho background image của một phần tử? Có các thuộc tính CS…

Thuộc tính background-blend-mode trong CSS3

  • Tác giả: toidicode.com
  • Đánh giá: 3 ⭐ ( 8982 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập chết độ hòa trộn của các lớp layer.

Thuộc tính nền CSS pha trộn chế độ

  • Tác giả: vi.w3hmong.com
  • Đánh giá: 3 ⭐ ( 6623 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Chế độ hòa trộn CSS

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 2218 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thông thường, khi thêm một hình ảnh vào một trang web, điều đầu tiên chúng ta làm là chỉnh sửa hình ảnh trong một phần mềm bên ngoài, chẳng hạn như Photoshop. Liệu chế độ hòa trộn loại bỏ sự…

Các chế độ hòa trộn của Photoshop blending mode –

  • Tác giả: dohoalaptrinh.com
  • Đánh giá: 3 ⭐ ( 6764 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các chế độ hòa trộn của Photoshop blending mode ,tài liệu photoshop ,hiệu ứng hòa trộn màu, hiệu ứng blending mode, hiệu ứng photoshop đặc biệt

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Xây dựng biểu ngữ ảnh cuộn vô hạn với HTML và CSS - làm thế nào để tạo một hình ảnh biểu ngữ css

By ads_php