html - 为什么图像从颜色叠加层中向外窥视？

标签 html css twitter-bootstrap bootstrap-4

我在图像上放置了黑色叠加层，但我注意到行图像沿边缘略微超出了叠加层。不同的尺寸对图像行的影响不同。我创建了一个加载 Bootstrap 4 CSS 和 JS 的 CodePen，因此可以实时查看。我还在下面上传了图片，这些图片显示了它的证据，以防你的运气比我好，具体取决于你的屏幕尺寸。感谢您的帮助!

代码笔: https://codepen.io/anon/pen/vMOwLb

HTML

<div class="card-container mx-auto">
    <div class="card-deck flex-row flex-nowrap card-deck-topic bkg-color">

        <div class="card card-topic">
            <a href="#" class="topic-card-box">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />

                <div class="card-body card-body-topic card-body-topic-align">
                    <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
                </div>
            </a>
        </div>

       <div class="card card-topic">
            <a href="#" class="topic-card-box">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />
                <div class="card-body card-body-topic card-body-topic-align">
                    <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
                </div>
            </a>
        </div>

        <div class="card card-topic">
            <a href="#" class="topic-card-box">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />

                <div class="card-body card-body-topic card-body-topic-align">
                    <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
                </div>
            </a>
        </div>

    </div><!-- END CARD DECK -->
</div><!-- END CARD-CONTIANER -->

CSS

html{
    font-size:62.5%;
}

.card-deck{
  margin-top:50px
}

.card-container{
    max-width:1400px;
    width:95%;
}

.card-body{
    max-width:250px;
    padding-left:10px;
    margin-top:-2px;
    cursor:pointer;
    transition:.3s;
    -webkit-transition:.3s;
}


.card-deck{
    display: flex;
    overflow: auto;
}

img.card-img-top{
    max-width:250px;
}

.card{
    margin-right:16px;
    border:none;
    flex: 0 0 auto;
}

.bkg-color{
        background-color:purple;
}

.card-block-img{
    margin-bottom:1.75rem;
    margin-top: 3.2rem;
}

.card-block-txt{
    margin-bottom:2.4rem;
}

    .card-sub-topic-title{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        font-family: 'Lora', "Georgia", "Times New Roman";
        color: #fff;
        font-size: 2.4rem;
        line-height: 3.4rem;
    }

    .card-body.card-body-topic.card-body-topic-align{
        margin-top: 0px;
    }

    .card-topic{
        border:0px !important;
        box-shadow: -8px 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin-left: 10px;
    }

    .card-body-topic{
        background-color: #0000009e;
        border:0px !important;
    }

    .card-topic.card .card-body:hover{
        background-color:#000000c7;
        border: 0px !important;
    }

    .card-body-topic-align{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width:100%;
    }

@media only screen and (min-width: 768px) {

    .card-deck {
        display: flex;
        padding-bottom: 75px;
    }   

    .card-body{
        min-width:350px;
    }

    img.card-img-top{
        min-width:350px;
    }

    .card-block-img{
        margin-bottom:6rem;
    }

@media only screen and (min-width:992px){

    .card-deck .card{
        margin-right:15px;
    }

    .card-body{
        min-width:100%;
    }

    img.card-img-top{
        min-width:100%;
    }

.card-body-topic-align{
    transform: translate(-50%, -50%);
}

.topic-container{
  padding-top:95px;
  margin:6.4rem 0 10.4rem 0;
}

图片

Image 1

Imgae 2 - Close Up

最佳答案

已更改

.card-body-topic-align{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width:100%;
}

进入 

.card-body-topic-align{
        position: absolute;
        top: 0%;
        left: 0%;
        /* transform: translate(-50%, -50%); */
        height: 100%;
        width:100%;
    }

和删除:

@media only screen and (min-width:992px){
  .card-body-topic-align{
    transform: translate(-50%, -50%);
  }
}

您的变换无法覆盖所有屏幕尺寸的所有区域……一定是发生了一些舍入，这阻止了所有像素被覆盖； 下面的演示也适用于您的代码笔示例:

    html {
  font-size: 62.5%;
}

.card-deck {
  margin-top: 50px
}

.card-container {
  max-width: 1400px;
  width: 95%;
}

.card-body {
  max-width: 250px;
  padding-left: 10px;
  margin-top: -2px;
  cursor: pointer;
  transition: .3s;
  -webkit-transition: .3s;
}

.card-deck {
  display: flex;
  overflow: auto;
}

img.card-img-top {
  max-width: 250px;
}

.card {
  margin-right: 16px;
  border: none;
  flex: 0 0 auto;
}

.bkg-color {
  background-color: purple;
}

.card-block-img {
  margin-bottom: 1.75rem;
  margin-top: 3.2rem;
}

.card-block-txt {
  margin-bottom: 2.4rem;
}

.card-sub-topic-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  font-family: 'Lora', "Georgia", "Times New Roman";
  color: #fff;
  font-size: 2.4rem;
  line-height: 3.4rem;
}

.card-body.card-body-topic.card-body-topic-align {
  margin-top: 0px;
}

.card-topic {
  border: 0px !important;
  box-shadow: -8px 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-left: 10px;
}

.card-body-topic {
  background-color: #0000009e;
  border: 0px !important;
}

.card-topic.card .card-body:hover {
  background-color: #000000c7;
  border: 0px !important;
}

.card-body-topic-align {
  position: absolute;
  top: 0%;
  left: 0%;
  /* transform: translate(-50%, -50%); */
  height: 100%;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .card-deck {
    display: flex;
    padding-bottom: 75px;
  }
  .card-body {
    min-width: 350px;
  }
  img.card-img-top {
    min-width: 350px;
  }
  .card-block-img {
    margin-bottom: 6rem;
  }
  @media only screen and (min-width:992px) {
    .card-deck .card {
      margin-right: 15px;
    }
    .card-body {
      min-width: 100%;
    }
    img.card-img-top {
      min-width: 100%;
    }
    .topic-container {
      padding-top: 95px;
      margin: 6.4rem 0 10.4rem 0;
    }
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">


<div class="card-container mx-auto">
  <div class="card-deck flex-row flex-nowrap card-deck-topic bkg-color">

    <div class="card card-topic">
      <a href="#" class="topic-card-box">
        <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />

        <div class="card-body card-body-topic card-body-topic-align">
          <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
        </div>
      </a>
    </div>

    <div class="card card-topic">
      <a href="#" class="topic-card-box">
        <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />
        <div class="card-body card-body-topic card-body-topic-align">
          <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
        </div>
      </a>
    </div>

    <div class="card card-topic">
      <a href="#" class="topic-card-box">
        <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />

        <div class="card-body card-body-topic card-body-topic-align">
          <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
        </div>
      </a>
    </div>

  </div>
  <!-- END CARD DECK -->
</div>
<!-- END CARD-CONTIANER -->

关于html - 为什么图像从颜色叠加层中向外窥视？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55481933/

上一篇：html - 如何扩展一个 <div> 来填充它的父级，而不是根据它自己的内容扩展？

下一篇：javascript - 是否保证 &lt;script&gt; 标记上的加载事件总是在脚本执行后立即触发？

相关文章：

css - CSS 中的背景图像不适用于三星电视 SDK 2011 模型/模拟器

css - Bootstrap 标题超出图像

html - Django:如何在 Bootstrap 中将表单集中在 html 模板上？

javascript - 更新 css 文件并缩小它

html - 元素导航上属性角色的错误值分页

javascript - php获取输入字段值和span值

html - 在 Bootstrap slider 中添加文本

javascript - 在 Google map Api Javascript 中创建自己的标记

html - twitter bootstrap - 最小宽度列？

javascript - 切换类别不删除类别

©2024 IT工具网  联系我们