Как мне избавиться от белых границ в моей загрузочной карте?Изменение цвета рамки не работает - PullRequest
Новая
       0

Как мне избавиться от белых границ в моей загрузочной карте?Изменение цвета рамки не работает

0 голосов
/ 12 мая 2018 
<!Doctype html>
<html5>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>IBAE-Information Library</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="/Users/jeevabharathi/Documents/Website/IBAE.css">
        <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    </head>


    <body>
        <nav>
            <h1 style="font-family:Helvetica;">
                <ul class="nav">
                    <li><a href="#">Menu 1</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown" href="#">Menu 2</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><font size="+4", color="white">IBAE</font> <br></li>
                    <li><a href="#">Menu 3</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 4</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                </ul>
            </h1>
        </nav>
        <br>
        <br>
        <br>
        <br>

       <div class="container">
           <!--row one column one-->
            <div class="row">
                <div class="col-sm-3"><div class="cardpop">
                        <div class="card img-fluid" style="width:600px">
                            <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
                            <div class="card-img-overlay">
                                <font color="white">
                                    <h4 class="card-title">John Doe</h4>
                                    <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
                                    <a href="#" class="btn btn-primary">See Profile</a>
                                </font>
                            </div>
                        </div></div>
                </div>
                <!--row one column two-->
                <div class="col-sm-3"><div class="cardpop">
                        <div class="card img-fluid" style="width:600px">
                                <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
                                <div class="card-img-overlay">
                                    <font color="white">
                                        <h4 class="card-title">John Doe</h4>
                                        <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
                                        <a href="#" class="btn btn-primary">See Profile</a>
                                    </font>
                                </div>
                            </div></div>

                </div>
                <!--row one column three-->
                <div class="col-sm-3"><div class="cardpop">
                        <div class="card img-fluid" style="width:600px">
                                <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
                                <div class="card-img-overlay">
                                    <font color="white">
                                        <h4 class="card-title">John Doe</h4>
                                        <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
                                        <a href="#" class="btn btn-primary">See Profile</a>
                                    </font>
                                </div>
                            </div></div>

                </div>
                <!--row one column four-->
                <div class="col-sm-3"><div class="cardpop">
                        <div class="card img-fluid" style="width:600px">
                                <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
                                <div class="card-img-overlay">
                                    <font color="white">
                                        <h4 class="card-title">John Doe</h4>
                                        <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
                                        <a href="#" class="btn btn-primary">See Profile</a>
                                    </font>
                                </div>
                            </div></div>

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


       <!--test-->









        <script   src="https://code.jquery.com/jquery-3.3.1.js"   integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="   crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    </body>
</html5>

Это мои html и CSS 

nav h1 
    {
        vertical-align: middle;   
        background-color: rgb(0, 0, 0);
        border: 10px solid rgba(0, 0, 0, 0);
        text-align: center;
        position: fixed;
        position: top;
        min-width: 100%;
        z-index: 3;

    }
.nav ul 
{
    vertical-align: middle;
    -webkit-font-smoothing:antialiased;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0);
    background: rgb(0, 0, 0);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 3;
}
.nav li 
{
    vertical-align: middle;
    float: left;
    margin: 0;
    padding: 100; 
    position: relative;
    min-width: 20%;
    z-index: 3;
}
.nav a 
{
    vertical-align: middle;
    background: rgb(0, 0, 0);
    display: block;
    font: bold 15px/50px helvetica;
    padding: 0 0 0 0px;
    text-align: center;
    text-decoration: none !important;
    color: rgb(255, 255, 255);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
            z-index: 3;
}
.nav .dropdown:after 
{
    content: '';
}
.nav .dropdown:hover:after
{
    content:''
}
.nav li:hover a 
{
    color: white;
    background: rgb(0, 0, 0);
}
.nav li ul 
{
    vertical-align: middle;
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 4;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
}
.nav li:hover ul 
{
    opacity: 1;
    top: 50px;
    visibility: visible;
}
.nav li ul li 
{
    float: none;
    width: 100%;
}
.nav li ul a:hover 
{
    background: rgb(255, 0, 0);
}

body{
    background: linear-gradient(to right, rgb(39, 38, 38), rgb(177, 72, 72),rgb(39, 38, 38))
}
.cardpop {
    transition: all 0.5s;
  }

  .cardpop:hover {
    transform: scale(1.1);
    box-shadow: rgb(37, 37, 37);
    transition: all 0.5s;
  }

  .cardpop:hover:before {
    opacity: 1;
  }

.cardpop:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
      transition: .15s all ease-out;
      opacity: 0;
      border-radius: 5px;
  }

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

Почему это происходит?Как мне это решить?Я пытался! Важно на границе, это не изменилось.Могу ли я просто решить это с помощью CSS?Я не хочу сейчас использовать JS.

Ссылка JDfiddle для кода: https://jsfiddle.net/pndmn1ev/

Ответы [ 3 ]

0 голосов
/ 12 мая 2018

Попробуйте это 

  .card.img-fluid {
    border-color: transparent;
    background-color: transparent;
  }
0 голосов
/ 12 мая 2018

Bootstrap 4 содержит несколько служебных классов границ - вы можете найти их здесь в документации по Boostrap.

В частности, вы заинтересованы в border-0, например; 

<div class="card border-0">...</div>

Карты Boostrap имеют границы для некоторых внутренних элементов (заголовок, тело и т. Д.). Убедитесь, что вы добавляете класс к нужному элементу (ам)

0 голосов
/ 12 мая 2018

Попробуйте следующие стили в вашем коде 

.card {
    border: 0;
    background-color: transparent;
}

Будет удален цвет рамки и фона элемента карты.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...