Добавление текста в изображение с использованием HTML5 / CSS

Я пытался создать баннер для своего сайта, который я создаю, но когда я добавляю его на свой сайт, получается очень плохо с текстом. Мне интересно, могу ли я добавить текст в свой баннер, используя HTML5 и / или CSS.

HTML:

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Play - Learn - Grow</title>
        <link rel="stylesheet" href="main.css">
    </head>

    <body class="body">

        <span class="banner_h">
            <img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
        </span>

        <nav>
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="membership.html">Become a Member</a></li>
                <li><a href="borrow.html">Borrow Toys</a></li>
                <li><a href="policies.html">Our Policies</a></li>
                <li><a href="sitemap.html">Site Map</a></li>
            </ul>
        </nav>

        <span class="banner_l">
            <img src="Images\Side_Banner.jpg" alt="Banner" />
        </span>

        <span class="banner_r">
            <img src="Images\Side_Banner.jpg" alt="Banner" />
        </span>

        <h2 class="headers">Welcome to the Home Page!</h2>

        <div class="container">

            Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
            their cognitive, social, emotional and physical development in the important first six years of their lives.

            <br><br><span class="Links">Be sure to check out our Wikispace site with more information <a href="http://mysocialmediatools-pn.wikispaces.com/">here</a>!</span>

        </div>

        <div id="content"></div>

        <div id="footer">
            Copyright &copy 2013
        </div>


      </body>

</html>

CSS:

/* Entire Document CSS */
html{
    height: 100%;
}
/* Header CSS */
.headers{
    color: #FFD89A;
    text-align: center;
    padding: 10px;
}
/* Body CSS */
.body{
    background-color: #61B329;
    height: 50%;
    color: #FFFFFF;
}
.container{
    margin: 0 auto 0 auto;
    width: 50em;
    text-align: center;
    padding-bottom: 500px;
    height: 50%;
}
/* Navigation CSS */
.nav {
    display: inline-block;
    background-color: #00B2EE;
    border: 1px solid #000000;
    border-width: 1px 0px;
    margin: 0;
    padding: 0;
    min-width: 1000px;
    width: 100%;
}
.nav li {
    list-style-type: none;
    width: 14.28%;
    float: left;
}
.nav a {
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
    float: left;
}
.banner_r{
    float: right;
}
.banner_h{
    display: block;
    width: 100%;
}
.banner_h img{
    width: 100%;
}
/* Footer CSS */
#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}
#content {
    padding-bottom: 3em;
}
/* Link CSS */
a:link{
    color: #FFFFFF;
    text-decoration: none;
}
a:visited{
    color: #FFFFFF;
    text-decoration: none;
}
a:hover{
    background-color: #028482;
    color: #FFFFFF;
    text-decoration: underline;
}
a:active{
    background-color: #FCDC3B;
    color: #AA00FF;
    text-decoration: overline;
}
.Links A:hover{
    color: #028482;
    background-color: transparent;
    text-decoration: underline overline;
}

Я пытаюсь центрировать / центрировать мой текст на баннере с помощью белого шрифта (шрифт может быть изменен). Что я должен сделать, чтобы это произошло? Спасибо!

Источник

1 ответ

Решение

Это зависит от того, какой текст вы будете добавлять на баннер. Если вы хотите добавить текст, который будет статичным (например, он никогда не будет изменяться или будет изменяться редко) и хотите добавить пользовательские шрифты, вам, вероятно, следует отредактировать изображение в Photoshop.

С другой стороны, если содержание в баннере будет постоянно меняться, то я бы предложил добавить изображение в качестве фона. Ваш баннер h класса будет выглядеть примерно так:

.banner_h{
    display: block;
    width: *actual pixel size of the banner*;
    height: *actual pixel size of the banner*;
    background: url('*location of file*') no-repeat;
}

Если вы оставите ширину в процентах, то получится, что у div ничего не будет внутри, и, следовательно, он не покажет баннер, поэтому вам нужно выяснить, какова фактическая ширина и высота баннера, и поместить его в это объявление CSS, так что он показывает баннер.

Сделав это, удалите изображение из тега и замените его содержимым, которое вы хотите добавить.

Источник
Другие вопросы по тегам