正文

html中如何在图片上加图片

优站号
优站号 V管理员 /0 评论 /19 阅读
0316
欧意国内注册
<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 50%;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            background-image: url('your_image.jpg');
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
<div class="container">
    <img src="your_image.jpg" alt="Your Image">
    <div class="overlay"></div>
</div>
</body>
</html>

在这个例子中，我们首先创建了一个名为.container的div，它包含我们的图片和一个名为.overlay的div，我们在.overlay div中使用了background-image属性来设置背景图片，我们将background-repeat设置为no-repeat，这意味着背景图片不会重复，我们还设置了background-size为cover，这意味着背景图片会覆盖整个容器，而不仅仅是填充容器。

请注意，你需要将your_image.jpg替换为你自己的图片URL，你也可以根据需要调整width和height属性。