[Hướng dẫn] Làm đẹp mô tả của ảnh với css

avatar

blogger59
178
27
blogger
An toàn
cập nhật
Thành viên quen thuộc
Thành viên quen thuộc

Bài viết :
59
Points :
178
Like :
27
blogger
An toàn
cập nhật
Code:
  <div class="main">
    <img src="http://i.imgur.com/zfLhMhu.png" id="logo">
  <div class="content"> <h3>Text</h3></div>

Code:
.main {
  position: relative;
  display: block;
  height: 380px;
  width: 1000px;
  border: 1px solid #ccc;
  margin: 10px auto;
  background-size: cover;
}

.content {
    line-height: 69px;
    background: rgba(255, 235, 59, 0.69);
    display: block;
    position: absolute;
    bottom: 0;
    padding: 0 30px;
}

.content:after {
    content: '';
    width: 0;
    height: 0;
    border-right: 55px solid transparent;
    border-bottom: 69px solid rgba(255, 235, 59, 0.69);
    position: absolute;
    right: -55px;
    top: 0;
}

h3 {
    margin: 0;
}
 
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...