У меня есть прокручиваемая таблица слева и справа с двумя строками и 30 + и растущими столбцами на моей домашней странице. Это выглядит следующим образом:Маркировка в верхнем левом углу элемента таблицы
Но я хотел бы добавить некоторые названия на «флаги», как это:
Как я мог бы добавить «флаги» без того, чтобы нарисовать прозрачный PNG и поместите его на верхний слой. Я думал об использовании холста, но как я мог нарисовать те «флаги», которые не являются квадратами, и помещать их в верхний правый угол каждой таблицы?
ADD
Мне нравится ответ @ РИК-Хичкок, который выглядит очень просто, и я попытался его реализации в моей веб-странице. Но «флаги» не будут отображаться.
Вот как я реализовал его:
table.index{
table-layout: fixed;
border-spacing: 20px;
}
table.index td {
height: 190px; /*iz tega se preračuna višina slike v %*/
width: 190px; /*iz tega se preračuna širina slike v %*/
min-width: 190px; /*ne smejo biti manjši - tabela se širi*/
position: relative; /*da deluje spodnja vrstica*/
overflow: hidden;
border-radius: 5px;
border: 1px solid #1A1A1A;
background-color: rgba(0, 0, 0, 0.90);
box-shadow: 0px 0px 8px #000000;
-moz-box-shadow: 0px 0px 8px #000000;
-webkit-box-shadow: 0px 0px 8px #000000;
vertical-align: middle;
text-align: center;
padding: 5px 5px 5px 5px;
}
table.index td img {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
z-index: -1;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}
table.index td a{
color: #FF3C3F;
}
table.index td p.napis{
opacity: 0.0;
color: white;
text-shadow: 0px 0px 2px #555555;
font-size: 14px;
font-family: ss9;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}
table.index td:hover p.napis{
opacity: 1.0;
}
table.index td:hover{
box-shadow: 0px 0px 15px #000000;
-moz-box-shadow: 0px 0px 15px #000000;
-webkit-box-shadow: 0px 0px 15px #000000;
}
table.index td:hover img {
-webkit-filter: blur(2px) opacity(20%);
-o-filter: blur(2px) opacity(20%);
-ms-filter: blur(2px) opacity(20%);
filter: blur(2px) opacity(20%);
}
div.index {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
}
<!-- THE CODE YOU PROVIDED-->
.container {
position: relative;
overflow: hidden;
display: inline-block;
}
.discount, .event {
position: absolute;
top: 0;
transform: rotate(-45deg);
transform-origin: 50% 250%;
width: 10em;
padding: 0.3em 0;
text-align: center;
border: 1px solid #333;
font: 14px verdana;
}
.discount {
background: #cfc;
}
.event {
background: yellow;
}<section class="index">
<div class="index">
<table class="index">
<tr>
<td>
<div class="container">
<div class="discount">Discount</div>
<img src="../slike/index/2016-01-18-embedded_world.jpg"/>
<p class="napis">
Obiskali bomo sejem <a href="https://www.embedded-world.de/en" target="_blank">Embedded world</a> v Nürnbergu, kjer si bomo ogledali najnovejšo tehnologijo na področju vgrajenih sistemov. Dijaki ŠC Kranj lahko pri meni prevzamete štiri brezplačne karte z vključenim prevozom!
</p>
</div>
</td>
</tr>
</table>
</div>
</section>По какой-то причине он не будет оказывать как «флаг», но только в виде текста. Обычно это выглядит так:
и Гувера мыши это выглядит следующим образом:
Вот мой webpage, если вы хотите, чтобы проверить его.
Код, который вы предоставили, работает, возможно, вам нужно дождаться, когда новый код будет загружен на ваш сайт, прежде чем вы увидите результаты. – jaunt