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