透明度(Transparency)是指一个对象(如图像、文本或背景)的可见程度。在CSS和JavaScript中,可以通过设置透明度来控制元素的显示效果。透明度可以通过多种方式实现,包括CSS的opacity
属性和rgba()
颜色函数,以及JavaScript动态修改这些属性。
opacity
属性:设置元素的整体透明度,取值范围为0(完全透明)到1(完全不透明)。rgba()
颜色函数:在RGB颜色基础上添加透明度通道,如rgba(255, 0, 0, 0.5)
表示红色半透明。opacity
属性或rgba()
颜色函数的透明度值,实现动态效果。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Transparency</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<img src="image1.jpg" alt="Image 1" class="image1">
<img src="image2.jpg" alt="Image 2" class="image2">
</div>
<script src="script.js"></script>
</body>
</html>
.container {
position: relative;
width: 500px;
height: 500px;
}
.image1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.7;
}
.image2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
}
document.querySelector('.image2').addEventListener('mouseover', function() {
this.style.opacity = '0.8';
});
document.querySelector('.image2').addEventListener('mouseout', function() {
this.style.opacity = '0.5';
});
DOMContentLoaded
事件。通过以上内容,你应该能够理解如何使用CSS和JavaScript在新图像上显示另一个新图像,并调整其透明度。
领取专属 10元无门槛券
手把手带您无忧上云