Использование html / css для размещения текста в центре каждого кликабельного изображения

Question

Использование html / css для размещения текста в центре каждого кликабельного изображения

0

Я хочу положить немного текста, сосредоточенного на кликабельном изображении. Существует большая поддержка вопроса по размещению текста над изображением с использованием HTML и CSS, но я не могу сделать ни один из рекомендаций для моей проблемы. Я думаю, это связано с тем, что 4 изображения, которые я хочу сделать, чтобы не иметь фиксированного местоположения, но вместо этого имеют размер относительно размера окна. Это было особенно полезно, но для совета J Query текст не отображался, когда я делал изображения доступными для ссылок.

Я понимаю, что, поскольку изображения меняют размер относительно размеров экрана, мне, возможно, придется использовать J-Query, чтобы сохранить текст в изображениях. Если ваши идеи выходят за рамки HTML/CSS, я тоже с удовольствием сделаю это!

Спасибо за миллион!

HTML:

<body>
    <img class="logo" src="Logo1.png"/>
    <div id="homeButtons">

        <a href="livetv.html">
            <img class="homeButtons" id="yellow" src="Content_Home/LiveTV.JPG"/> 
            TEXT
        </a>

        <a href="design.html">
            <img class="homeButtons" id="blue" src="Content_Home/DandC.JPG"/> 
        </a>

        <br>

        <a href="resume.html">
            <img class="homeButtons" id="green" src="Content_Home/Resume.JPG"/>
        </a>

        <a href="contact.html">
            <img class="homeButtons" id="pink" src="Content_Home/Contact.JPG"/> 
        </a>

    </div>
</body>

CSS:

    /* Standards for ALL Pages */

body{
    background-color: black;
}

.logo{
    width:100%;
}

.defaultFont{
    font-size: 40px;
    font-family: 'Montserrat', sans-serif;
    color: yellow;
}

a{
    text-decoration: none;  
    color: black;
}

/* Home Page: home.html */

.homeButtons{
    /* applies to squares individually */
    width:30%;
    border-radius: 20px;
    opacity: .7;
    margin: 10px;
}

#homeButtons{
    /* centers all 4 squares as an entire entity, wouldn't work if was added to each individual square in the .homeButtons class above */
    text-align: center;
    display: inline-block;
}

#yellow{
    border: 10px solid #FFE200;
}
#green{
    border: 10px solid #00B400;
}
#blue{
    border: 10px solid #006DF2;
}
#pink{
    border: 10px solid #F2007D;
}

katestrykermcm 04 дек. 2013, в 07:37

Источник

0

Привет, не могли бы вы повторить эту проблему на JSFiddle?
Bala 04 дек. 2013, в 06:03
0

jsfiddle.net/KJKG2
katestrykermcm 04 дек. 2013, в 16:02

Теги:

jquery

html

css

image

2 ответа

Ещё вопросы

Привет, не могли бы вы повторить эту проблему на JSFiddle?

Bala.C · Answer 1 · 2013-12-04T05-00-00.000Z

Пожалуйста, найдите Stackoverflow для подобных разрешенных вопросов и попробуйте, если вы сможете решить проблему с ее помощью.

Вот хороший ответ на аналогичный вопрос - Поместите текст поверх изображения

И вот потрясающий учебник от Криса Койера, чтобы достичь Text On Image

http://css-tricks.com/text-blocks-over-image/

Надеюсь, это поможет вам понять.

Vikram Deshmukh · Answer 2 · 2013-12-04T03-38-00.000Z

<body>
    <img class="logo" src="Logo1.png"/>
    <div id="homeButtons">

        <a href="livetv.html">
            <div class='container'>
                 <img class="homeButtons" id="yellow" src="Content_Home/LiveTV.JPG"/> 
                 TEXT
            </div>
        </a>

        <a href="design.html">
            <div class='container'>
                 <img class="homeButtons" id="blue" src="Content_Home/DandC.JPG"/> 
                 MORE TEXT
            </div>
        </a>

        <br>

        <a href="resume.html">
            <div class='container'>
            <img class="homeButtons" id="green" src="Content_Home/Resume.JPG"/>
            </div>
        </a>

        <a href="contact.html">
            <div class='container'>
            <img class="homeButtons" id="pink" src="Content_Home/Contact.JPG"/> 
            </div>
        </a>

    </div>
</body>

Стили требовали:

.container {
     position: relative;
     text-align: center;
}
.container img {
     position: absolute;
     display: block;
}

Я пробовал подобный подход, но, к сожалению, это портит расстояние и расположение изображений. jsfiddle.net/KJKG2