3
我的主页上有一个左右两个可滚动的表格，其中包含两行和三十多个以及不断增加的列。它看起来像这样：表格元素左上角的标记
但我想补充的“标志”像这样一些头衔：
我怎么能添加“标志”，而无需绘制透明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