如何删除bootstrap 3 popover上的底部阴影?
我在css的任何地方找不到阴影,我已经删除了我的CSS中的所有阴影。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
body {
padding-top: 300px
}
.teamMember {
width: 60%;
margin: auto;
transition: all .3s ease;
padding: 20px;
}
.teamMember:hover {
box-shadow:
4px 4px 4px rgba(0,0,0,.3),
-4px -4px 4px rgba(0,0,0,.3);
}
.teamMember img {
width: 50%;
}
.teamMember h4 {
font-size: 3em;
font-family: 'Arimo';
}
.teamMember h5 {
text-transform: none !important;
color: rgba(0,0,0,.7) !important;
font-size: 2em !important;
}
.popover {
background: rgba(0,0,0,0) url('https://i.imgur.com/mmiTupu.jpg') no-repeat center;
background-size: cover;
border: none;
border-radius: 0;
box-shadow: none !important;
text-shadow: none !important;
}
.popover-content {
border: none;
border-radius: 0;
padding: 100px;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="teamMember" data-placement="top" data-content="oof<br/>test">
<img src="https://i.imgur.com/mmiTupu.jpg">
<h4>oof</h4>
<h5>oof</h5>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var template = [
'<div class="popover">',
'<div class="popover-content">',
'</div>',
'</div>'
].join('');
$(".teamMember").popover({
trigger: "hover",
html: !0,
template: template
});
});
</script>
这个片段应该会产生同样的错误,但这不是出于某些原因,而且老实说我很困惑。我在css或dev工具中看不到阴影,所以我有点卡住了。由于代码段没有显示问题,因此现场直播:https://piggeh.org/meraki/team
任何帮助都将不胜感激。
答案 0 :(得分:1)
您将无法将其删除,因为它已添加到此网址中的背景照片中:https://piggeh.org/meraki/assets/images/team/popup.png
见这里:
如果您想要保留没有阴影的背景,您应该在没有阴影的情况下下载并编辑上面给出的网址中的照片,然后重新上传。