解决方法
不幸的是,只使用CSS不能使这种情况发生.您可以通过在包含背景图像的同一容器中放置一个额外的绝对元素来实现您的目标.
可能是这样的事情
$(document).ready(function() { $('button').click(function(e) { $(".blurry").css('background-color','white') .css('opacity','.1') .css('Box-shadow','white 0px 0px 20px 20px'); }); });
.wrapper { width:500px; height:150px; position:relative; } #brand { width:500px; height:150px; display:inline-block; background-image:url("http://spmdesign.net/wp-content/uploads/2013/05/ss-2-bg.jpg"); } .blurry { width:40px; height:50px; position:absolute; left:30px; bottom:25px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div class="wrapper"> <a id="brand"></a> <div class="blurry"></div> </div> </div> <button>blur</button>
原文地址:https://www.jb51.cc/css/214295.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。