CSS鼠标点击改变图片透明度

沃梦达教程前端开发

2024-03-13

下面是如何通过CSS实现鼠标点击改变图片透明度的攻略：

下面是如何通过CSS实现鼠标点击改变图片透明度的攻略：

准备工作

首先，需要添加一张需要变换透明度的图片和一些基本的HTML代码。以修改透明度的图片为例，我们可以这样写：

<!DOCTYPE html>
<html>
<head>
    <title>CSS鼠标点击改变图片透明度</title>
    <style>
        /* 默认不透明 */
        img {
            opacity: 1;
        }

        /* 移动到图片上时透明度为 0.5 */
        img:hover {
            opacity: 0.5;
        }

        /* 点击图片时透明度为 0.2 */
        img:active {
            opacity: 0.2;
        }
    </style>
</head>
<body>
    <img src="your-image.jpg" alt="你的图片" />
</body>
</html>

上面的代码实现了三种状态下不同的透明度。默认情况下，图片完全不透明，当移动鼠标到图片上时，图片的透明度变成了0.5，当点击图片时，图片的透明度变成了0.2。

示例及说明

假设我们有一个网站，网站的背景是黑色的。我们希望我们的图片在默认状态下也是不透明的，当鼠标移动到图片上时变成半透明，在用户点击图片后变得非常透明。

这里是一个实例：

<!DOCTYPE html>
<html>
<head>
    <title>CSS鼠标点击改变图片透明度</title>
    <style>
        body {
            background-color: black;
        }

        /* 图片默认状态下不透明 */
        img {
            opacity: 1;
            transition: opacity 0.2s ease-in-out;
        }

        /* 图片鼠标移动到时半透明 */
        img:hover {
            opacity: 0.5;
        }

        /* 图片鼠标点击后非常透明 */
        img:active {
            opacity: 0.1;
        }
    </style>
</head>
<body>
    <img src="your-image.jpg" alt="你的图片" />
</body>
</html>

这里，body元素背景色被设置成黑色，使得图片看起来更加突出。img元素的默认透明度设置为1，transition属性为css淡出效果的一种，让设置的透明度的变换过程更加自然。

当鼠标移动到图片上时，透明度变成了0.5。img:hover选择器是当鼠标指针在元素上方时执行的样式，这意味着当用户鼠标指针移动到图片上时，图片的透明度会变为0.5。

最后，当用户点击图片时，透明度变得非常透明，img:active选择器是当鼠标按钮被按下时执行的样式，这意味着当用户点击图片时，图片的透明度会变为0.1。

沃梦达教程

本文标题为：CSS鼠标点击改变图片透明度