Question

如何设置照片和文字的样式以产生效果，如下面的示例照片中所示。有什么想法吗？

Answer 1

实际上有10种方法可供选择。我可以在HTML5中使用<figure>。所以，这是相同的代码。

＆＃13;

.card{
  width:200px;
}
.card-image{
  display:block;
  border-top-left-radius: 8px;
   border-top-right-radius: 8px;
  width:200px;
  height:200px;
}
.bottom-caption{
  font-size:18px;
  line-height:24px;
  text-align:center;
  background:black;
  color:white;
  font-weight:bold;
  font-family:sans-serif;
  padding: 4px 0;
  border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
}

＆＃13;

<figure class="card">
  <img src="https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/399_bootstrap_sass/preview.png" alt="sass" class="card-image">
  <figcaption class="bottom-caption"> 1 MEMBER </figcaption>
</figure>

＆＃13;

Answer 2

我认为你需要的是什么？

https://jsfiddle.net/ev0op09q/2/

@import url(https://fonts.googleapis.com/css?family=Roboto:700,400);
body {
  font-family: 'Roboto', sans-serif;
}
.img-container {
  width:200px;
  border-radius:5px;
  overflow: hidden;
  float:left;
}
.img-name{
  background: #000;
    color: #fff;
    margin: -4px 0 0;
    padding: 10px 0;
    text-align: center;
    line-height:16px;
    font-weight:700;
}
.content {
  width:200px;
  float:left;
  margin-left:30px;
}
a {
  text-decoration:none;
}

<div class="img-container">
<img src="http://lorempixel.com/image_output/cats-q-c-200-200-3.jpg" alt="cat">
<p class="img-name">Cool cat</p>
</div>
<div class="content">
  <h1>Cats love you</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
  <a href="#">Click me</a>
</div>

照片和文字定位CSS + HTML

2 个答案: