Я хочу положить немного текста, сосредоточенного на кликабельном изображении. Существует большая поддержка вопроса по размещению текста над изображением с использованием 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;
}
Пожалуйста, найдите Stackoverflow для подобных разрешенных вопросов и попробуйте, если вы сможете решить проблему с ее помощью.
Вот хороший ответ на аналогичный вопрос - Поместите текст поверх изображения
И вот потрясающий учебник от Криса Койера, чтобы достичь Text On Image
http://css-tricks.com/text-blocks-over-image/
Надеюсь, это поможет вам понять.
<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;
}