Блок с изображением и текстом с использованием Bulma CSS - PullRequest
Новая
       11

Блок с изображением и текстом с использованием Bulma CSS

0 голосов
/ 24 ноября 2018

Я пытаюсь сделать этот блок изображения с текстом, используя Bulma CSS.Я перепробовал много вещей (относительный, z-index и т. Д.), И мне не удалось сделать что-то отличное для настольных компьютеров или мобильных устройств.Каждый раз текст переполняется или выходит за рамки.Я не могу установить ограничение на количество символов в заголовке, поэтому я стараюсь также разбивать слова на второй строке, если это возможно.

Вот пример того, что я ищу:

enter image description here

Вот мой HTML: 

<div class="block_article" data-overlay>
   <img src="/static/img/{{ article.image }}" alt="" />
   <a href="/a/{{ article.slug }}.html"><span>{{ article.name }}</span></a>
</div>

И мой текущий CSS (не работает): 

.block_article {
    position: relative;
    width: 500px;
    height: 250px;
}

.block_article span {
    position: absolute; 
    top: 50px;
    left: 5%; 
    width: 100%;
    color: white;
    text-shadow: 2px 2px black;
    font-size: 1.3em;
}

Результат:

enter image description here

Есть ли несколько советов для такого рода вещей или расширение Bulma для этого?

Спасибо за вашу помощь!

Ответы [ 2 ]

0 голосов
/ 24 ноября 2018

Вот мои последние HTML и CSS для людей, которые находятся в одном и том же случае.Это, вероятно, не идеально, но это хорошее начало ... 

<div class="hero block_article" style="background-image: url('/static/img/{{ article.image }}');">
    <span>{{ article.name }}</span>
</div>

.block_article {
    width: 500px;
    height: 250px;
    background-size: cover;
    line-height: 230px;
    text-align: center;
    border-radius: 10px;
}

.block_article span {
    color: white;
    text-shadow: 2px 2px black;
    font-size: 1.3em;
}

Результат:

enter image description here

0 голосов
/ 24 ноября 2018

При использовании Bulma взгляните на элемент .hero: https://bulma.io/documentation/layout/hero/. Это может быть то, что вы ищете.Как упоминала Вийра, вы можете добавить свое изображение к фону (используя background-image).

Кроме того, вам может пригодиться изучение того, как центрировать вещи (https://www.w3.org/Style/Examples/007/center.en.html).

...