文章/答案/技术大牛

发布

社区首页 >问答首页 >有没有办法模糊背景，而不是css中的文本？

问有没有办法模糊背景，而不是css中的文本？
EN

Stack Overflow用户

提问于 2022-07-18 18:18:02

回答 1查看 68关注 0票数 0

#baslik {
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: bold;

}


#musteri_yorumlari {
    color: rgb(255, 255, 255);
    text-align: center;
    position: relative;
    bottom: 50px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: 20px;
    font-weight: bold;
    filter: blur(10px);
    display: table;
    margin: 0 auto 0 auto;


}





#border {
    background-color: #5ab138;
    
    border-radius: 20px;
    border-style: outset;
    border-width: 5px;
    border-color: rgb(231, 231, 231);

    padding: 15px;
    text-shadow: #ff6a00;
    text-shadow: 2px 2px 3px #00000065;

}



#ozlusoz {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: 20px;

    text-align: center;
    position: relative;
    top: -15px;
}










#tum_videolar {
    text-align: center;


}



#video__1 {


    display: inline-block;
    *display: inline;

}



#video__2 {


    display: inline-block;
    *display: inline;

}


#video__3 {



    display: inline-block;
    *display: inline;
}

#video__4 {



    display: inline-block;
    *display: inline;
}

#video__5 {



    display: inline-block;
    *display: inline;


}

#video__6 {



    display: inline-block;
    *display: inline;

}

#video__7 {



    display: inline-block;
    *display: inline;


}

#video__8 {



    display: inline-block;
    *display: inline;
}

#video__1,
#video__2,
#video__3,
#video__4,
#video__5,
#video__6,
#video__7,
#video__8 {
    border: ;
    border-width: ;
    border-radius: ;


}





body {
    background-color: #0d0d0d;
    position: relative;
    bottom: 40px;
    
}

#profilephoto {
    width: 8%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    bottom: 54px;

    border-radius: 50%;
    border: solid white;

    box-shadow: 0em 0em 30px rgb(255, 75, 75);




}

#Jason_P {
    color: rgb(46, 53, 255);
    text-shadow: none;
    font-size: 15px;
}

#Cory_Z {
    color: rgb(46, 53, 255);
    text-shadow: none;
    font-size: 15px;
}

#formore {
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    
    background-color:#51515180;
    border-radius: 10px;
    display: table;
    margin: 0 auto 0 auto;
    padding: 2px;
    

}

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mirza Sahin </title>
    

</head>

<body>
    
    <h1 id="baslik">Mirza Sahin</h1>
    <br>

    <img src="/Profile Photo.jpg" alt="Mirza Sahin" id="profilephoto">

    <br><br>


    <div id="musteri_yorumlari">
        <div id="border">
            <div id="yorum">"Mirza was amazing to work with. His attention to detail and skill level is the top 1% on
                Upwork.<br> Well done will def use again!"<br><span id="Jason_P">Jason P. / United States</span></div>
            <br>
            <div id="yorum">"Mirza is incredible with anything video. He takes my terrible videos, works his magic, and
                creates a masterpiece. <br>Would highly recommend!" <br><span id="Cory_Z">Cory Z. / Canada</span></div>
        </div>
    </div>




    <div id="tum_videolar">

        <div id="video__1">

            <iframe title="vimeo-player" src="https://player.vimeo.com/video/509719836?h=6ae2aadcb5" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>

        </div>



        <div id="video__2">

            <iframe title="vimeo-player" src="https://player.vimeo.com/video/636505933?h=e048a335e6" width="640"
                height="340" frameborder="0" allowfullscreen>
            </iframe>

        </div>

        <br><br><br>


        <div id="video__3">

            <iframe title="vimeo-player" src="https://player.vimeo.com/video/645523495?h=c198f0dedd" width="640"
                height="340" frameborder="0" allowfullscreen>
            </iframe>

        </div>

        <div id="video__4">

            <iframe title="vimeo-player" src="https://player.vimeo.com/video/567036624?h=4ce12ce017" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>

        </div>

        <br><br><br>


        <div id="video__5">

            <iframe title="vimeo-player" src="https://player.vimeo.com/video/714396313?h=28b0205e0f" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>

        </div>

        <div id="video__6">
            <iframe title="vimeo-player" src="https://player.vimeo.com/video/714090413?h=0d265ce8f0" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>

        </div>


        <br><br><br>

        <div id="video__7">
            <iframe title="vimeo-player" src="https://player.vimeo.com/video/626411112?h=faf989f7d4" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>
        </div>

        <div id="video__8">
            <iframe title="vimeo-player" src="https://player.vimeo.com/video/695168003?h=1f4f9749bd" width="640"
                height="340" frameborder="0" allowfullscreen></iframe>

        </div>




    </div>
    <br>


    <h1 id="formore">
        <a href="https://vimeo.com/mirzasahin" id="clickhere" style="text-decoration: none; color: #5ab138;"
            target="_blank" alt="Vimeo Account">Click here</a> for more works
    </h1>

    

</body>

</html>

我想给一个模糊效果的绿色区域的背景。但是由于背景是文本的背景，也就是整个，当我想模糊背景时，文本中也增加了模糊效果。我不想给文本添加模糊，只想添加背景。或者是否有一个代码来排除具有模糊效果的文本？就像“；没有”

代码

html

css

blur

回答 1

Stack Overflow用户

发布于 2022-07-18 22:56:43

当您在父元素上应用模糊时，它将自动应用于子元素。您可以做的是将文本和背景分开，只在后台元素上应用过滤器。下面是一种最低限度的工作方法：

<div class="wrapper"> 
  <div class="text"> some text here </div>
  <div class="bg"> </div>
</div>

CSS

.wrapper{
  position:relative;
  display:grid;
  justify-items:center;
  align-items:center;

}
.text{
  color:black;
  position:absolute;
  z-index:1;
}
.bg {
  height: 5rem;
  width:10rem;
  background-color:red;
  filter: blur(5px);  
}

此外，css中的id应该是唯一的，但是在您的示例中，您使用的id="yorum"不止一次。如果您想在多个地方应用相同的css，那么您应该使用classes。当然，它还有更多的东西，这超出了这个答案的范围。请将这篇文章作为一个起点，并查看css中的特性。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73026863

复制

相似问题

问有没有办法模糊背景，而不是css中的文本？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法模糊背景，而不是css中的文本？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法模糊背景，而不是css中的文本？
EN