Question

我有一个简单的页面，其中在阴影框中显示徽标和标题。

问题是我无法在阴影框之外找到标题。

这是页面的演示

.name {
	color: #1b1a1a;
  margin-top: 45px;
	font-size: 16px;
	text-align: center;
}

.shadow {
    padding: 30px;
    margin-right: 60px;
    box-shadow: 4px 5px 13px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

.shadow img {
	margin: 0 auto;
}

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">    
    <div class="row equal">
            <div class="col-md-2 shadow">
              <img src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_120,w_120,f_auto,b_white,q_auto:eco/v1483512777/dexdvfcyzuywzztqilod.png" class="img-responsive" alt="Image">
              <div class="name">Cambian networks</div>
            </div>
            <div class="col-md-2 shadow"> 
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Anbox_logo.png/120px-Anbox_logo.png" class="img-responsive" alt="Image"><br/>
              <div class="name"><p>Android</p></div>
            </div>
    </div>
</div>

我想将Cambian networks和Android放在（外面）盒子里。

这也是Jsfiddle演示https://jsfiddle.net/7j9usa05/

Answer 1

在这种情况下，您需要在相关元素上加上“阴影”。对于上述情况，请尝试仅将盒子阴影放在图像上。更新了“ {https://jsfiddle.net/f14awjks/”上的小提琴相关样式更新：

 .shadow {
    padding: 30px;
    margin-right: 60px;
    background-color: #ffffff;
}

.shadow img {
    margin: 0 auto;
    box-shadow: 4px 5px 13px rgba(0, 0, 0, 0.05);
}

Answer 2

从父级移除阴影并将其提供给img标签。那应该可以解决您的问题。

.name {
  color: #1b1a1a;
  margin-top: 45px;
  font-size: 16px;
  text-align: center;
}

.shadow {
  padding: 10px;
  /* margin-right: 60px; */
  box-shadow: 4px 5px 13px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

.shadow img {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row equal">
    <div class="col-md-2">
      <img src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_120,w_120,f_auto,b_white,q_auto:eco/v1483512777/dexdvfcyzuywzztqilod.png" class="img-responsive shadow" alt="Image">
      <div class="name">Cambian networks</div>
    </div>
    <div class="col-md-2">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Anbox_logo.png/120px-Anbox_logo.png" class="img-responsive shadow" alt="Image">
      <div class="name">
        <p>Android</p>
      </div>
    </div>
  </div>
</div>

Answer 3

更改您的HTML和CSS

<div class="container">    
    <div class="row equal">
            <div class="col-md-2">
            <div class="shadow">
              <img src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_120,w_120,f_auto,b_white,q_auto:eco/v1483512777/dexdvfcyzuywzztqilod.png" class="img-responsive" alt="Image">
                          </div>
              <div class="name">Cambian networks</div>
            </div>
            <div class="col-md-2"> 
            <div class="shadow">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Anbox_logo.png/120px-Anbox_logo.png" class="img-responsive" alt="Image">
                          </div>
              <div class="name"><p>Android</p></div>
            </div>
    </div>
</div>

https://jsfiddle.net/xLg745s6/

在简单的引导页面上无法在图像框外获得标题

3 个答案: