資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在剪影中放置影像或影片？
您可能在某些網站上看到過在剪影中播放影像或影片的情況。剪影可以是影像、物體、人物或動物，以黑色表示，並勾勒出主題的輪廓。我們可以在剪影中插入任何影像或影片，這樣影片或影像將顯示為剪影的顏色。
在本文中，我們將瞭解如何將影像或影片放置在剪影中。
如何在剪影中放置物件？
剪影是物體或人物的影像，以黑色或其他調色盤顏色表示的實心形狀表示。現在，我們將在這裡使用的屬性將是 mix-blend 屬性，並且該屬性用於指定特定元素的內容與其最近的父級如何混合。
語法
以下是使用 mix-blend 屬性的語法：
mix-blend mode: =darken,multiply,normal;
mix-blend 模式具有 normal、multiply、screen 和 darken 等值，它們中的每一個都會改變與其最近父級混合的關係。讓我們看一個例子來更好地理解這個 mix-blend 屬性。
示例
在以下示例中，我們建立了三個容器，然後為它們提供了三個不同的類。然後在 CSS 部分，我們更改了寬度和高度以及 border-radius，以便它獲得圓形的形狀，然後更改所有圓圈的顏色。預期輸出的程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using the mix-blend property</title>
<style>
.round {
border-radius: 50%;
width: 79px;
mix-blend-mode: screen;
height: 79px;
position: absolute;
}
.round-one {
background: red;
}
.round-second {
left: 38px;
background: yellow;
}
.round-third {
left: 19px;
background: blue;
top: 39px;
}
.iso {
position: relative;
Isolation: isolate;
}
</style>
</head>
<body>
<div class="isolate">
<div class="round round-one"></div>
<div class="round round-two"></div>
<div class="round round-third"></div>
</div>
</body>
</html>
如您所見，透過使用 mix-blend 屬性，我們將上面的圓圈與 2 種不同的顏色混合在一起。
現在，我們知道了 mix-blend 模式屬性的工作原理，我們將把影像或影片放置在剪影中，並確保擁有所需的資源來做到這一點。讓我們轉到程式碼部分，看看我們將如何在剪影中插入影像或影片。
示例
在此示例中，我們將透過使用 mix-blend 模式屬性在剪影影像中新增影像。
在這裡，我們首先添加了一個剪影影像，然後添加了我們將要混合的影像。之後，我們將它們包含在 div 下，然後為它們指定了一個類。之後轉到 CSS 部分，然後在新增的影像上使用了 mix-blend 模式屬性並將值設定為 screen。讓我們看看使用以下程式碼將獲得的輸出。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of the silhoutte property</title>
<style>
.con {
justify-content: center;
display: flex;
align-items: center;
}
body {
min-height: 99vh;
}
.con .main {
position: relative;
width: 399px;
margin: 48px;
height: 399px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.con .main img {
top: 0;
left: 0;
position: absolute;
width: 98%;
mix-blend-mode: screen;
height: 99%;
object-fit: cover;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="con">
<div class="main">
<img src="https://tutorialspoint.tw/static/images/banner-img.png?v=2.001" />
<img src="https://tutorialspoint.tw/images/logo.png" />
</div>
</div>
</body>
</html>
您可以在上面的輸出中看到，我們添加了剪影影像，然後添加了另一個影像，當我們使用 mix-blend 模式屬性時，影像與剪影混合在一起，看起來它是一個影像，而不是兩個不同的影像。
注意 - 我們可以將 mix-blend 模式屬性與文字、影像、SVG 一起使用，並且支援 mix-blend 模式屬性的瀏覽器包括 chrome、edge、safari、Firefox 等。
結論
剪影效果可用於使網站更具互動性和吸引力，並且只需在 CSS 中使用一個屬性即可實現，該屬性是 mix-blend 屬性，它定義了內容與其最近父級的內容和父級的背景如何混合。
在本文中，我們瞭解瞭如何使用一些 CSS 屬性（如 mix-blend 模式屬性）將影像或影片放置在剪影中。
168 次瀏覽
