有人可以帮我正确设置徽标的位置和背景模糊徽标吗？ JSFiddle

Question

我有一个PSD，我正在转换为HTML / CSS - 我尝试过4种或5种不同的方法，但没有一种是正确的 - 这就是PSD卡的样子，即预期的结果：

这就是我所拥有的：

HTML：

<div class="row">
  <div class="col-md-3">
    <div class="restaurant-box">
      <div class="restaurant-box-header">
        <img class="restaurant-logo-blur" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" />
      </div>
      <div class="restaurant-box-body">
        <img class="restaurant-logo" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" />
        <div class="restaurant-box-content">
          <h4>Restaurant Name</h4>
          <span>Pizza, BBQ, Kebab, Halal</span>
          <br/>
          <span>RATING STARTS</span>
        </div>
      </div>
      <div class="restaurant-box-footer">
        DELIVERS IN 45 MINS
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="restaurant-box">
      <div class="restaurant-box-header">
        <img class="restaurant-logo-blur" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" />
      </div>
      <div class="restaurant-box-body">
        <img class="restaurant-logo" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" />
        <div class="restaurant-box-content">
          <h4>Restaurant Name</h4>
          <span>Pizza, BBQ, Kebab, Halal</span>
          <br/>
          <span>RATING STARTS</span>
        </div>
      </div>
      <div class="restaurant-box-footer">
        DELIVERS IN 45 MINS
      </div>
    </div>
  </div>
</div>

CSS：

.restaurant-box {
  width: 100%;
  border: 1px solid #808080;
  position: relative;
}

.restaurant-box-header {
  width: 100%;
  height: 200px;
  z-index: -1;
  position: absolute;
}

.restaurant-box-body {
  background-color: #FFFFFF;
}

.restaurant-logo {
  height: 90px;
  width: 90px;
  position: absolute;
  z-index: 10;
  top: -45px;
  margin-left: 50%;
  left: -45px;
}

.restaurant-logo-blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100%;
}

.restaurant-box-footer {
  background-color: #e43b36;
  color: #FFFFFF;
  width: 100%;
  padding: 10px;
  text-align: center;
}

有人可以帮我正确设置徽标的位置和背景模糊徽标吗？ JSFiddle

Answer 1

你走在正确的轨道上，但你可以简化这一点。

我建议你依靠gulp / grunt /无论添加供应商前缀。

HTML：

<div class="card">
  <div class="card__blur">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo">
  </div>
  <div class="card__logo">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" width="120" />
  </div>
  <div class="card__info">
    <h4>Restaurant Name</h4>
    <p>Pizza, BBQ, Kebab, Halal</p>
    <p>RATING STARTS</p>
  </div>

  <footer class="card__footer">Delivers in 35 minutes</footer>
</div>

CSS：

.card {
  width: 251px;
  border: 1px solid #efefef;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

.card__blur {
  filter: blur(5px);
  overflow: hidden;
}

.card h4 {
  font-size: 1.6em;
}

.card__logo {
  margin: auto;
  width: 120px;
  transform: translateY(-50%);
  margin-bottom: -40px;
}

.card__info {
  text-align: center;
}

.card__info p {
  font-size: 10px;
}

.card__footer {
  background: red;
  color: white;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}

Fid的：

https://jsfiddle.net/2oog70up/2/

Answer 2

好的，通过编辑CSS，我得到了这段代码：

<div class="row">
  <div class="col-md-3">
    <div class="restaurant-box">
      <div class="restaurant-box-header">
        <img class="restaurant-logo-blur" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" />
      </div>
      <div class="restaurant-box-body">
        <img class="restaurant-logo" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" />
        <div class="restaurant-box-content">
          <h4>Restaurant Name</h4>
          <span>Pizza, BBQ, Kebab, Halal</span>
          <br/>
          <span>RATING STARTS</span>
        </div>
      </div>
      <div class="restaurant-box-footer">
        DELIVERS IN 45 MINS
      </div>
    </div>
  </div>

// Make copy of array with shifting to one item. 
// And, to save array length, add one element to the end of the array. 
// It can be any number, but not continue sequence. 
// I add the last item of source array
$src1 = $src;
array_shift($src1);
array_push($src1,end($src));

// Then subtract corresponding items of array
$temp = array_map(function ($i, $j) { return $j-$i; }, $src, $src1);
// Look at arrays 
// $src   3, 15, 16, 17, 18, 20,  25, 7
// $temp 12,  1,  1,  1,  2,  5, -18, 0, 
// As you can see, all elements of sequences, but the last, has 1 in `temp` array.  
// Therefore, we just need to collect the result 
$sarr = false;
$result = array();

for($i=0; $i<count($src); $i++) {
  if($temp[$i] == 1) {
      if(! $sarr) {
        $sarr = $src[$i];
      }
  }
  else {
     if(! $sarr) {
       $result[] = $src[$i];
     }
     else {
       $result[] = [$sarr, $src[$i]];
       $sarr = false;
     }
  }        
}

print_r($result);

以下是代码中的JS Fiddle。我知道这可能不是你想要的，但我希望它有所帮助。

在HTML-CSS和Bootstrap中设计此卡片视图

有人可以帮我正确设置徽标的位置和背景模糊徽标吗？ JSFiddle

2 个答案: