在css中为图像赋予不透明度使文本变得模糊

<style>
    .container {
        position: relative;
        width: 500px;
        height: 300px;
    }

    .image {
        width: 100%;
        height: 100%;
        opacity: 0.5; /* 设置图像的不透明度为0.5 */
    }

    .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* 添加文本阴影以增加可读性 */
    }
</style>

<div class="container">
    <img class="image" src="your-image.jpg" alt="Your Image">
    <div class="text">Hello, World!</div>
</div>