Question

我有以下HTML / CSS代码

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #image {
                background-image:url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg);
                display:block;
                width:100%;
                height:500px;
                position:relative;
                background-size:cover;
            }
            #blur {
                display:block;
                position:absolute;
                width: 300px;
                height:300px;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                border-radius:150px;
                -webkit-filter:blur(10px); filter: blur(10px); -moz-filter:blur(30px); -ms-filter: blur(10px);
            }
        </style>
    </head>
    <body>
        <div id="image">
            <div id="blur"></div>
        </div>
    </body>
</html>

我希望图像的中间部分模糊成一个点。如果我将#blur的背景颜色更改为蓝色，我可以看到它存在。但是圈子模糊并没有发生。

有关如何通过CSS在图片中获得模糊圆圈的任何建议吗？

Answer 1

变通方法/解决方案：

您必须对初始图像应用模糊以使其模糊，因为您无法将其应用到指定的位置，我们只需使用叠加模糊这个和调整它的大小。我们可以非常轻松地使用您的点，只需将以下CSS添加到您当前的文件中：

#blur {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg);
    background-position: center center;
}

结果看起来像这样：

＆＃13;

<html>
    <head>
        <style type="text/css">
            #image {
                background-image:url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg);
                display:block;
                width:500px;
                height:500px;
                position:relative;
            }
            #blur {
                display:block;
                position:absolute;
                width: 300px;
                height:300px;
                top:50%;
                left:50%;
                background-image:url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg);
                background-position: center center;
                transform:translate(-50%,-50%);
                border-radius:150px;
                -webkit-filter:blur(10px); filter: blur(10px); -moz-filter:blur(30px); -ms-filter: blur(10px);
            }
        </style>
    </head>
    <body>
        <div id="image">
            <div id="blur"></div>
        </div>
    </body>
</html>

＆＃13;

Answer 2

您可以使用此代码

body {
            background: url('https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') no-repeat center center fixed;
            background-size: cover;
        }
        .blur {
            background: url(https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=) no-repeat center center fixed;
            background-size: cover;
            overflow: hidden;
            filter: blur(13px);
            position: absolute;
            height: 300px;
            top: -50px;
            left: -50px;
            right: -50px;
            bottom: -50px;
            width: 300px;
            margin: 0 auto;
            border-radius: 100px;
        }
        .widget {
            border: 5px solid rgba(255, 255, 255, .5);
            height: 300px;
            width: 300px;
            border-radius: 100%;
            overflow: hidden;
        }
        .center {
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .text {
            height: 300px;
            width: 300px;
        }
        .text h1 {
            text-align: center;
            text-shadow: 1px 1px rgba(0, 0, 0, .1);
            color: #ffffff;
            margin-top: 100px;
            font-family: 'Lora', serif;
            font-weight: 700;
            font-size: 38px;
        }
        .text p {
            text-align: center;
            color: #ffffff;
            text-shadow: 1px 1px rgba(0, 0, 0, .1);
            margin-top: 0px;
            font-family: 'Lato', serif;
            font-weight: 400;
            font-size: 22px;
        }

<div class="widget center">
        <div class="blur"></div>
        <div class="text center">
        <h1 class="">Lorem ipsum</h1>
        <p>sit amet ipsum dolor</p>
        </div>
    </div>

CSS模糊背景图像的一部分

2 个答案: