在HTML中混合图像和背景



在下面的HTML文档中,Microsoft徽标与背景图像不融合。有人知道如何将徽标与背景图像混合或删除徽标的背景颜色吗?我尝试过使用命令混合媒体模式:multiply,但图像仍然没有正确混合。谢谢你的帮助。

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-image: url('https://i.pinimg.com/564x/09/01/f0/0901f088d78988a5b6bc66af7cfbfec8.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;    
}
</style> 
</head>
<body> 
<img src= "https://i.pinimg.com/564x/09/05/85/090585401505f54e69a1a5e218759171.jpg" height="35px" alt="">

</body>
</html>

用div对其进行Sourround并给出不透明度。您可以使用混合混合模式:相乘;也适用于带有参数的身体,以满足您的需求

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-image: url('https://i.pinimg.com/564x/09/01/f0/0901f088d78988a5b6bc66af7cfbfec8.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;    
}
#logo{
opacity:0.2;
}
</style> 
</head>
<body> 
<div id="logo">
<img src="https://i.pinimg.com/564x/09/05/85/090585401505f54e69a1a5e218759171.jpg" height="35px" alt="">
<div/>
</body>
</html>

最新更新