使用Bootstrap在Modal View中看不到某些DIV

Question

显示＆＃34; n＆＃34;模态视图中的div（具有渐变背景）。问题是并非所有＆＃34; n＆＃34; div正确可见。

JSFiddle - here

更新 - 问题似乎只发生在Chrome

上

测试 - 代码

CSS

.mypoint{
    cursor: pointer;
    height: 200px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin: 5px;
}

.mypoint2{
    padding: 0;
    margin: 0;
}

.gradient1{
    background: -webkit-gradient(linear, center top, center bottom, from(#ff5e3a), to(#ff2a68));
    background: -webkit-linear-gradient(#ff5e3a, #ff2a68);
    background: -moz-linear-gradient(#ff5e3a, #ff2a68);
    background: -o-linear-gradient(#ff5e3a, #ff2a68);
    background: -ms-linear-gradient(#ff5e3a, #ff2a68);
    background: linear-gradient(#ff5e3a, #ff2a68);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5e3a', endColorstr='#ff2a68',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient2{
    background: -webkit-gradient(linear, center top, center bottom, from(#ff9500), to(#ff5e3a));
    background: -webkit-linear-gradient(#ff9500, #ff5e3a);
    background: -moz-linear-gradient(#ff9500, #ff5e3a);
    background: -o-linear-gradient(#ff9500, #ff5e3a);
    background: -ms-linear-gradient(#ff9500, #ff5e3a);
    background: linear-gradient(#ff9500, #ff5e3a);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9500', endColorstr='#ff5e3a',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient3{
    background: -webkit-gradient(linear, center top, center bottom, from(#ffdb4c), to(#ffcd02));
    background: -webkit-linear-gradient(#ffdb4c, #ffcd02);
    background: -moz-linear-gradient(#ffdb4c, #ffcd02);
    background: -o-linear-gradient(#ffdb4c, #ffcd02);
    background: -ms-linear-gradient(#ffdb4c, #ffcd02);
    background: linear-gradient(#ffdb4c, #ffcd02);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdb4c', endColorstr='#ffcd02',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient4{
    background: -webkit-gradient(linear, center top, center bottom, from(#87fc70), to(#0bd318));
    background: -webkit-linear-gradient(#87fc70, #0bd318);
    background: -moz-linear-gradient(#87fc70, #0bd318);
    background: -o-linear-gradient(#87fc70, #0bd318);
    background: -ms-linear-gradient(#87fc70, #0bd318);
    background: linear-gradient(#87fc70, #0bd318);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87fc70', endColorstr='#0bd318',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient5{
    background: -webkit-gradient(linear, center top, center bottom, from(#52edc7), to(#5ac8fb));
    background: -webkit-linear-gradient(#52edc7, #5ac8fb);
    background: -moz-linear-gradient(#52edc7, #5ac8fb);
    background: -o-linear-gradient(#52edc7, #5ac8fb);
    background: -ms-linear-gradient(#52edc7, #5ac8fb);
    background: linear-gradient(#52edc7, #5ac8fb);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52edc7', endColorstr='#5ac8fb',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient6{
    background: -webkit-gradient(linear, center top, center bottom, from(#1ad6fd), to(#1d62f0));
    background: -webkit-linear-gradient(#1ad6fd, #1d62f0);
    background: -moz-linear-gradient(#1ad6fd, #1d62f0);
    background: -o-linear-gradient(#1ad6fd, #1d62f0);
    background: -ms-linear-gradient(#1ad6fd, #1d62f0);
    background: linear-gradient(#1ad6fd, #1d62f0);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ad6fd', endColorstr='#1d62f0',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient7{
    background: -webkit-gradient(linear, center top, center bottom, from(#c644fc), to(#5856d6));
    background: -webkit-linear-gradient(#c644fc, #5856d6);
    background: -moz-linear-gradient(#c644fc, #5856d6);
    background: -o-linear-gradient(#c644fc, #5856d6);
    background: -ms-linear-gradient(#c644fc, #5856d6);
    background: linear-gradient(#c644fc, #5856d6);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c644fc', endColorstr='#5856d6',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient8{
    background: -webkit-gradient(linear, center top, center bottom, from(#ef4db6), to(#c643fc));
    background: -webkit-linear-gradient(#ef4db6, #c643fc);
    background: -moz-linear-gradient(#ef4db6, #c643fc);
    background: -o-linear-gradient(#ef4db6, #c643fc);
    background: -ms-linear-gradient(#ef4db6, #c643fc);
    background: linear-gradient(#ef4db6, #c643fc);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef4db6', endColorstr='#c643fc',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient9{
    background: -webkit-gradient(linear, center top, center bottom, from(#4a4a4a), to(#2b2b2b));
    background: -webkit-linear-gradient(#4a4a4a, #2b2b2b);
    background: -moz-linear-gradient(#4a4a4a, #2b2b2b);
    background: -o-linear-gradient(#4a4a4a, #2b2b2b);
    background: -ms-linear-gradient(#4a4a4a, #2b2b2b);
    background: linear-gradient(#4a4a4a, #2b2b2b);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a', endColorstr='#2b2b2b',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient10{
    background: -webkit-gradient(linear, center top, center bottom, from(#dbddde), to(#898c90));
    background: -webkit-linear-gradient(#dbddde, #898c90);
    background: -moz-linear-gradient(#dbddde, #898c90);
    background: -o-linear-gradient(#dbddde, #898c90);
    background: -ms-linear-gradient(#dbddde, #898c90);
    background: linear-gradient(#dbddde, #898c90);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbddde', endColorstr='#898c90',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient11{
    background-color: #ff3b30;

}
.gradient12{
    background-color: #ff9500;

}
.gradient13{
    background-color: #ffcc00;

}
.gradient14{
    background-color: #4cd964;

}
.gradient15{
    background-color: #34aadc;

}
.gradient16{
    background-color: #007aff;

}
.gradient17{
    background-color: #5856d6;

}
.gradient18{
    background-color: #ff2d55;

}
.gradient19{
    background-color: #8e8e93;

}
.gradient20{
    background-color: #c7c7cc;

}
.gradient21{
    background: -webkit-gradient(linear, center top, center bottom, from(#5ad427), to(#a4e786));
    background: -webkit-linear-gradient(#5ad427, #a4e786);
    background: -moz-linear-gradient(#5ad427, #a4e786);
    background: -o-linear-gradient(#5ad427, #a4e786);
    background: -ms-linear-gradient(#5ad427, #a4e786);
    background: linear-gradient(#5ad427, #a4e786);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ad427', endColorstr='#a4e786',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;


}
.gradient22{
    background: -webkit-gradient(linear, center top, center bottom, from(#c86edf), to(#e4b7f0));
    background: -webkit-linear-gradient(#c86edf, #e4b7f0);
    background: -moz-linear-gradient(#c86edf, #e4b7f0);
    background: -o-linear-gradient(#c86edf, #e4b7f0);
    background: -ms-linear-gradient(#c86edf, #e4b7f0);
    background: linear-gradient(#c86edf, #e4b7f0);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c86edf', endColorstr='#e4b7f0',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient23{
    background-color: #D1EEFC;

}
.gradient24{
    background-color: #E0F8D8;

}
.gradient25{
    background: -webkit-gradient(linear, center top, center bottom, from(#fb2b69), to(#ff5b37));
    background: -webkit-linear-gradient(#fb2b69, #ff5b37);
    background: -moz-linear-gradient(#fb2b69, #ff5b37);
    background: -o-linear-gradient(#fb2b69, #ff5b37);
    background: -ms-linear-gradient(#fb2b69, #ff5b37);
    background: linear-gradient(#fb2b69, #ff5b37);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb2b69', endColorstr='#ff5b37',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient26{
    background: -webkit-gradient(linear, center top, center bottom, from(#f7f7f7), to(#d7d7d7));
    background: -webkit-linear-gradient(#f7f7f7, #d7d7d7);
    background: -moz-linear-gradient(#f7f7f7, #d7d7d7);
    background: -o-linear-gradient(#f7f7f7, #d7d7d7);
    background: -ms-linear-gradient(#f7f7f7, #d7d7d7);
    background: linear-gradient(#f7f7f7, #d7d7d7);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d7d7d7',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient27{
    background: -webkit-gradient(linear, center top, center bottom, from(#1d77ef), to(#81f3fd));
    background: -webkit-linear-gradient(#1d77ef, #81f3fd);
    background: -moz-linear-gradient(#1d77ef, #81f3fd);
    background: -o-linear-gradient(#1d77ef, #81f3fd);
    background: -ms-linear-gradient(#1d77ef, #81f3fd);
    background: linear-gradient(#1d77ef, #81f3fd);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d77ef', endColorstr='#81f3fd',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient28{
    background: -webkit-gradient(linear, center top, center bottom, from(#d6cec3), to(#e4ddca));
    background: -webkit-linear-gradient(#d6cec3, #e4ddca);
    background: -moz-linear-gradient(#d6cec3, #e4ddca);
    background: -o-linear-gradient(#d6cec3, #e4ddca);
    background: -ms-linear-gradient(#d6cec3, #e4ddca);
    background: linear-gradient(#d6cec3, #e4ddca);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6cec3', endColorstr='#e4ddca',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient29{
    background: -webkit-gradient(linear, center top, center bottom, from(#55efcb), to(#5bcaff));
    background: -webkit-linear-gradient(#55efcb, #5bcaff);
    background: -moz-linear-gradient(#55efcb, #5bcaff);
    background: -o-linear-gradient(#55efcb, #5bcaff);
    background: -ms-linear-gradient(#55efcb, #5bcaff);
    background: linear-gradient(#55efcb, #5bcaff);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55efcb', endColorstr='#5bcaff',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient30{
    background-color: #FF4981;

}
.gradient31{
    background-color: #FFD3E0;

}
.gradient32{
    background-color: #F7F7F7;

}
.gradient33{
    background-color: #FF1300;

}
.gradient34{
    background-color: #1F1F21;

}
.gradient35{
    background-color: #BDBEC2;

}
.gradient36{
    background-color: #FF3A2D;

}

HTML

<!-- theme modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="background-color: transparent;background-image:url('images/blur_08.png');background-repeat: repeat;"> <!-- 0.8 -->

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel" style="color: black;">Seleziona Tema</h4>
        </div>

        <div class="modal-body">

            <div class="row">

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient1 mypoint" onclick="SET_THEME(1,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient2 mypoint" onclick="SET_THEME(2,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient3 mypoint" onclick="SET_THEME(3,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient4 mypoint" onclick="SET_THEME(4,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient5 mypoint" onclick="SET_THEME(5,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient6 mypoint" onclick="SET_THEME(6,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient7 mypoint" onclick="SET_THEME(7,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient8 mypoint" onclick="SET_THEME(8,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient9 mypoint" onclick="SET_THEME(9,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient10 mypoint" onclick="SET_THEME(10,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient11 mypoint" onclick="SET_THEME(11,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient12 mypoint" onclick="SET_THEME(12,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient13 mypoint" onclick="SET_THEME(13,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient14 mypoint" onclick="SET_THEME(14,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient15 mypoint" onclick="SET_THEME(15,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient16 mypoint" onclick="SET_THEME(16,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient17 mypoint" onclick="SET_THEME(17,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient18 mypoint" onclick="SET_THEME(18,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient19 mypoint" onclick="SET_THEME(19,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient20 mypoint" onclick="SET_THEME(20,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient21 mypoint" onclick="SET_THEME(21,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient22 mypoint" onclick="SET_THEME(22,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient25 mypoint" onclick="SET_THEME(25,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient27 mypoint" onclick="SET_THEME(27,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient28 mypoint" onclick="SET_THEME(28,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient29 mypoint" onclick="SET_THEME(29,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient30 mypoint" onclick="SET_THEME(30,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient31 mypoint" onclick="SET_THEME(31,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient33 mypoint" onclick="SET_THEME(33,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient34 mypoint" onclick="SET_THEME(34,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient35 mypoint" onclick="SET_THEME(35,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient36 mypoint" onclick="SET_THEME(36,<?php echo $_SESSION['ID'];?>);"></div></div>

            </div>

        </div>

        <div class="modal-footer">
           <button type="button" class="btn btn-primary" data-dismiss="modal">Chiudi</button>
        </div>


    </div>
  </div>
</div>



<li><a style="color: red;" class="" href="#" data-toggle="modal" data-target=".bs-example-modal-lg"><span class="glyphicon glyphicon-picture" style="margin-right: 5px;"></span>TEMA</a></li>

Answer 1

这是Chrome中已知的错误之一。您可以通过此处描述的许多不同方式修复它：Fixed attachment background image flicker/disappear in chrome when coupled with a css transform。我建议将这一行添加到.gradientXX课程中，因为它对我有用：

-webkit-transform: translate3d(0,0,0);

如果不起作用，请尝试上面链接中的其他解决方法。

在Chrome 36中，这个错误已经解决，但我仍然在Opera 21（使用Chromium engnie）中看到它。另外，Opera中还有其他一些不相关的错误，所以请在javascript控制台中查看。

Answer 2

我也有这个问题，请尝试从CSS中删除以下内容

background-attachment：fixed;