Как стилизовать фотографию и текст, чтобы сделать эффект, как показано ниже в моем примере фотографии. Есть идеи?Позиционирование фотографий и текста CSS + HTML
-3
A
ответ
0
На самом деле есть 10-х способов вы можете пойти на это. Я мог бы пойти с <figure>
в HTML5. Итак, вот код для этого.
.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;
}
<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>
0
Я думаю, что это то, что вам нужно?
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>
Смежные вопросы
- 1. CSS и HTML-позиционирование
- 2. CSS: Позиционирование текста
- 3. html/css позиционирование текста/проблема DIV
- 4. Позиционирование изображения и текста HTML
- 5. Позиционирование текста и изображения с помощью CSS и HTML
- 6. CSS Позиционирование в html
- 7. Позиционирование в HTML/CSS?
- 8. Позиционирование текста и изображения с помощью css
- 9. HTML, CSS, Позиционирование и разрешения
- 10. Позиционирование текста и изображения над навигационной панелью. html/css
- 11. HTML/CSS CSS коробка и позиционирование
- 12. Позиционирование с помощью HTML и css
- 13. Позиционирование изображения и текста
- 14. позиционирование текста HTML в ярлыке
- 15. HTML/CSS Позиционирование таблиц
- 16. Позиционирование изображения и текста
- 17. HTML/CSS Позиционирование путаницы
- 18. HTML позиционирование CSS
- 19. html css mondrian позиционирование
- 20. HTML/CSS позиционирование помощь
- 21. HTML/позиционирование CSS
- 22. HTML, CSS позиционирование divs
- 23. Позиционирование текста CSS не меняется
- 24. HTML и CSS: позиционирование и/или поплавка?
- 25. css и позиционирование
- 26. Позиционирование в css и html с bootstrap
- 27. позиционирование DIV-й в HTML и CSS
- 28. Doctype и позиционирование CSS
- 29. Позиционирование CSS и clearfix
- 30. css позиционирование различных стилей текста в div
Пробовали ли вы что-нибудь? И, пожалуйста, прочитайте это: [Как спросить] (http://stackoverflow.com/help/how-to-ask) – Garric15
Этот вопрос слишком широк, основан на мнениях или требует обсуждения, и поэтому не по теме для переполнения стека , Если у вас есть конкретная, ответственная, проблема с программированием, предоставьте полную информацию. –