2015-09-06 12 views
0

У меня есть страница на моем сайте, что, когда я наводил курсор на одну из картин, накладывается надпись с надписью для изображения. Вот код для одного из этих изображений:Образы, исчезающие при импорте таблицы стилей Bootstrap

<div id="content"> 
      <div class="mosaic-block fade"> 
       <a target ="_blank" href = "files/file1.pdf" class="mosaic-overlay"> 
        <div class="details"> 
         <h4>Form #1</h4> 
         <p>Permission Slip</p> 
         </div> 
       </a> 
       <div class="mosaic-backdrop"><img src="img/thumb1.jpg"/></div> 
      </div> 

С помощью этих таблиц стилей/скриптов, связанных в моем заголовке, изображения и наложения работы

<link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="../events/eventInfoStyle.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="../events/headbar.css"> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="../events/header.js"></script> 
    <script type="text/javascript" src="js/mosaic.1.0.1.js"></script> 

Но когда я добавляю бутстраповские те, картинки уже нет появляются. Вот загрузочные, которые я добавляю.

<!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

    <!-- Latest compiled JavaScript --> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

В чем причина того, что изображения не появляются с добавлением Bootstrap? Вот остальная часть моего CSS:

Main.css:

.nav{ 
    background-color:white; 

} 
.affix{ 
    top: 0; 
    width: 100%; 
    margin-bottom:10px; 
} 

.nav a { 
    color: #5a5a5a; 
    font-size: 11px; 
    font-weight: bold; 
    padding: 14px 10px; 
    text-transform: uppercase; 


} 

.nav li { 
    display: inline; 

} 

.jumbotron { 
    margin-top:5px; 

    height: 700px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-color: #56A0D3; 
    background-image: url('wvlogo.png'); 

} 

.jumbotron .container { 
    position: relative; 
    top:100px; 
} 

.jumbotron h1 { 
    color: #fff; 
    font-size: 48px; 
    font-family: 'Shift', sans-serif; 
    font-weight: bold; 
    text-align:center; 


} 

.jumbotron p { 
    font-size: 20px; 
    color: #fff; 
} 

.learn-more { 
    background-color: #f7f7f7; 

} 

.learn-more h3 { 
    font-family: 'Shift', sans-serif; 
    font-size: 18px; 
    font-weight: bold; 
} 

.learn-more a { 
    color: #00b0ff; 
} 

.announcements{ 
    background-color:#efefef; 
    border-bottom: 1px solid #dbdbdb; 
} 
.announcements h2{ 
    color:#393c3d; 
    font-size:24px; 
    } 
.announcements p{ 
    font-size:15px; 
    color:rgb(0, 32, 96); 
    margin-bottom:13px; 
    text-align:center; 
    height:150px; 
    padding:30px; 
    border-radius:25px; 
    background-color: #56A0D3; 
} 


.myStatsLogin{ 
    background-color:#56A0D3; 
    border-style:solid; 
    border-width:5px; 
    border-radius:25px; 
    width:300px; 
    text-align:center; 
    margin:auto; 
    color: rgb(0,32,96); 
    font-size: 16px; 
    font-weight: bold; 
    padding: 7px 5px; 
    text-transform: uppercase; 
} 
.carousel-announcement{ 
    height:200px; 
    color:rgb(0,32,96); 
    font-size:32px; 
    background-color:#56A0D3; 
    text-align:center; 
    padding-top:20px; 
    padding-left:100px; 
    padding-right:100px; 
} 

.section-title h1{ 
    font-size:48px; 
    margin:0px; 
    text-align:center; 
    text-decoration:underline; 
    color: rgb(0,32,96); 
    background-color:#56A0D3; 
} 
EVENTINFOSTYLE.CSS: 
h1{ 



    color:#002060; 
    font-size: 40px; 
     font-weight: bold; 
     padding: 7px 5px; 
     text-transform: uppercase; 
     background-color:#56A0D3; 
     border-radius:25px; 
     border:solid 3px rgb(0,32,96); 
    margin:0; 

    margin-top:1em; 

} 



form{ 

    width:50%; 

    position:relative; 

    display:inline-block; 

} 

body{ 

    background-color:#00007f; 

    background: linear-gradient(#B4D8E7, #00005f); 
    /*background-repeat:no-repeat; 
    height:100%;*/ 

    text-align:center; 

} 

.sideImage{ 

    float:right; 

    width:40%; 

    display:inline-block; 

} 

img{ 

    position:relative; 

    width:100%; 

} 

.announcment{ 

    margin: 0 auto; 

    background-color: rgba(0,32,96,.85); 
    border-radius:15px; 

    padding: 2em; 

    display: block; 

    position: relative; 

    text-align: left; 

} 

.announcment h1{ 

    color: white; 

    font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif; 

    font-style: italic; 

    font-size: 3em; 

    text-shadow:2px 2px #000; 

    margin-top: 0; 

    text-align: center; 

} 

.announcment h2{ 

    color: white; 

    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif; 

    font-size: x-large; 

    text-shadow:2px 2px #000; 

} 

.announcment p{ 

    color: white; 

    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif; 

    font-size: large; 

    text-shadow:2px 2px #000; 

} 



.announcment li{ 

    color: white; 

    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif; 

    font-size: large; 

    text-shadow:2px 2px #000; 

} 

.announcmentWrapper{ 

    margin: 0 auto; 

    margin-bottom:2em; 

    margin-top:2em; 

    padding: 1em; 

    width: 70%; 

    background-color: #56A0D3; 
    border-radius:25px ; 

    position: relative; 

    display: inline-block; 

} 



hr.experiencehr { 

    border: 0; 

    height: 1px; 

    background: #3498db; 

    background-image: -webkit-linear-gradient(left, rgba(0,50,96,.85), #3498db, rgba(0,50,96,.85)); 

    background-image: -moz-linear-gradient(left, rgba(0,50,96,.85), #3498db, rgba(0,50,96,.85)); 

    background-image:  -ms-linear-gradient(left, rgba(0,50,96,.85), #3498db, rgba(0,50,96,.85)); 

    background-image:  -o-linear-gradient(left, rgba(0,50,96,.85), #3498db, rgba(0,50,96,.85)); 

} 

li{ 

    line-height: 0em; 

} 

a:link{ 

    color:#eee; 

} 

a:visited{ 

    color:#ccc; 

} 

HEADBAR.CSS: 
.signup{ 

    position:relative; 

    border-left:1px solid black; 

    color:white; 

    float:right; 

    padding: 0.5em; 

    margin:0.2em; 

    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif; 

    cursor:pointer; 

    z-index:100; 

} 

.headbar{ 

    position:fixed; 

    background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f)); 

    background:-moz-linear-gradient(center top, #005fbf 5%, #003f7f 100%); 

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f); 

    width:100%; 

    z-index:9999; 

    overflow:hidden; 

    height:2.5em; 

} 

body{ 

    margin:0; 

} 
+0

Скорее всего, bootstrap's css переопределяет ваш пользовательский css. Пожалуйста, разместите здесь свои коды css. –

+0

Я попытался положить мой css в конец, поместив бутстрап после моего, и пробовал его без моего css, но всякий раз, когда загрузочный файл появляется, изображения не появляются. И даже если бы это было как-то переоценка, как это могло бы вызвать появление изображений? –

+0

Пожалуйста, разместите свой css, и я проверю его. –

ответ

0

Ваш .fade класс также самозагрузки класса. переименуйте его my-fade и посмотрите, делает ли это.

+0

. Это привело к созданию контура изображения, но без изображения –

+0

вы тоже изменили его на своих страницах js? – Dominofoe

Смежные вопросы