时间戳

首页 > 解决方案 > 是什么导致使用不同大小的背景图像产生如此不同的结果？

html - 是什么导致使用不同大小的背景图像产生如此不同的结果？

问题描述

我有这个代码：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.all-cards {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.card {
  position: relative;
  width: 256px;
  height: 384px;
  margin-left: 32px;
  margin-bottom: 32px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.05), 2px 4px 32px 0 rgba(0, 0, 0, 0.1), 0 0 64px 0 rgba(0, 0, 0, 0.2);
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: transform 300ms ease;
}

.card .card-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 70px;
  left: 0;
  background-position: center;
  background-size: cover;
  transition: bottom 300ms ease;
}

.card .card-content {
  position: absolute;
  z-index: 10;
  padding: 0.5rem;
  height: 100%;
  background: white;
  transform: translateY(314px);
  transition: transform 300ms ease;
}

.card .card-content .card-header {
  font-size: 1.5rem;
  font-weight: 700;
}

.card .card-content .card-meta {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 0.5rem;
}

.card .card-content .card-description {
  opacity: 0;
  transition: opacity 500ms ease 100ms;
}

.card:hover {
  transform: translateY(-16px);
}

.card:hover .card-image {
  bottom: 280px;
}

.card:hover .card-content {
  transform: translateY(104px);
}

.card:hover .card-content .card-description {
  opacity: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hover Cards</title>

  <!--<link rel="stylesheet" href="css/style.css">-->
  <link href="card.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>
  <div class="all-cards">
    <div class="card">
      <div class="card-image" style="background-image: url(https://source.unsplash.com/random/256x383)"></div>
      <div class="card-content">
        <div class="card-header">
          Cool Title
        </div>
        <div class="card-meta">
          By Mubanga
        </div>
        <div class="card-description">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis maiores expedita exercitationem rerum, voluptate laudantium nostrum ratione aliquam adipisci, vitae soluta repellat cupiditate, inventore ipsa distinctio quidem assumenda voluptates eligendi.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-image" style="background-image: url(https://source.unsplash.com/random/256x383)"></div>
      <div class="card-content">
        <div class="card-header">
          Cool Title
        </div>
        <div class="card-meta">
          By Mubanga
        </div>
        <div class="card-description">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis maiores expedita exercitationem rerum, voluptate laudantium nostrum ratione aliquam adipisci, vitae soluta repellat cupiditate, inventore ipsa distinctio quidem assumenda voluptates eligendi.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-image" style="background-image: url(https://source.unsplash.com/random/256x383)"></div>
      <div class="card-content">
        <div class="card-header">
          Cool Title
        </div>
        <div class="card-meta">
          By Mubanga
        </div>
        <div class="card-description">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis maiores expedita exercitationem rerum, voluptate laudantium nostrum ratione aliquam adipisci, vitae soluta repellat cupiditate, inventore ipsa distinctio quidem assumenda voluptates eligendi.
        </div>
      </div>
    </div>

  </div>

</body>

</html>

如果我更改背景图像：

background-image: url(http://www.example.com/image.jpg)

对于非固定大小的图像，代码不再起作用，重叠 div“卡”。

我不明白为什么。

jsfiddle

标签： htmlcss

解决方案

推荐阅读