如何解决如何在HTML / CSS中使用模糊功能
我正在尝试模糊网站代码的一部分。这是我正在尝试执行的代码和图像
这是CSS
#blur {
box-shadow: 0 10px 20px rgba(0,0.80)
}
这是代码
<div>
<img class="logo" src="logo.jpg" alt="Kusko logo">
<h1 class="lobsterfont">Kusko Enterprise</h1>
<h3 class="lobsterfont">Home,Baby and More!</h3>
<h3 class="aboutbar quicksandfont">Home | About | Contact Us</h3>
</div>
这就是我得到的。它无法在此部分下方显示模糊的功能,而在h1元素上方的某处显示
:当我尝试测试并发现问题时,请删除徽标和“首页|关于|与我们联系”,效果很好:
<div>
<h1 class="lobsterfont">Kusko Enterprise</h1>
<h3 class="lobsterfont">Home,Baby and More!</h3>
</div>
那我的代码在做什么呢? 我会很感激
解决方法
如果要使图像或部分模糊,则需要通过CSS
添加,在html
中添加带有模糊的ID名称将无济于事。
#blur-image,#blur-text {
filter: blur(8px); // blur effect
}
<img src="https://images.unsplash.com/photo-1593642702909-dec73df255d7?ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="blur-image">
<div id="blur-text">
<h3>Testing testing </h3>
<h4>Testing testing </h4>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。