半透明白色のPng画像をHTMLのTableの背景に使用する

なんだかよくわからない題名ですが、元々したかったことは、
「HTML文を書いていてTableの背景を半透明の白色にしたかった。」ということです。



こんな感じです。


<table border="1" ><tr bgcolor=rgba(255,255,255,0.5)><td>
<br>こんな感じです。<br><br>
</td></tr></table>

このように書けばできるのですが、
bgcolor=rgba(255,255,255,0.5)の部分で背景色を指定しています。
()内の数値の最初から赤、緑、青を0から255までの数値で指定して、次に透明度を0から1で指定します。

これで終わるはずだったのですが、この指定方法に対応していないものがあったので別の方法を考えたら、意外と手間取ったという話です。


方針

Tableの背景に画像を表示する方法があります。そこで半透明の白色の画像をTableの背景に設定することにしました。
画像データはBase64で文字列にエンコードしてHTMLに埋め込むことにしました。

半透明の白色のPng画像を作成

透明色に対応した画像ソフトはあるのですが、半透明に対応したものはあまりありません。
Photoshopは当然対応しているのですが、これだけのために購入はできません。
結局Visual Basic 2010で作成することにしました。
[使い方]
サイズはドット数を指定します
透過度は0から255の範囲で指定します。0は透明、255は完全に不透過です。
色は赤緑青各々を0から255の範囲で指定します。
ボタンを押すと右にその色を表示し、下の枠に作成したデータを表示します。
下の例では縦横8ドット透過度50%の赤色のpngファイルを作成しています。
(白色だと絵的に分かりにくいので赤にしています)


フォームには
上からTextBoxを6個、(Name)はTextBox1からTextBox6
TextBox6のみMultilineをTrueに変更
CheckBox1個
Buttton 1個
PictureBox 1個
SaveFileDialog 1個

ソースは下記

Public Class Form1

    Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
        Dim W As Integer
        Try
            W = CInt(TextBox1.Text)
        Catch ex As Exception
            MsgBox("サイズが整数ではありません")
            Exit Sub
        End Try

        Dim A As Integer
        Try
            A = CInt(TextBox2.Text)
        Catch ex As Exception
            MsgBox("透過度が整数ではありません")
            Exit Sub
        End Try

        Dim R As Integer
        Try
            R = CInt(TextBox3.Text)
        Catch ex As Exception
            MsgBox("色Rが整数ではありません")
            Exit Sub
        End Try

        Dim G As Integer
        Try
            G = CInt(TextBox4.Text)
        Catch ex As Exception
            MsgBox("色Gが整数ではありません")
            Exit Sub
        End Try

        Dim B As Integer
        Try
            B = CInt(TextBox5.Text)
        Catch ex As Exception
            MsgBox("色Bが整数ではありません")
            Exit Sub
        End Try


        If A < 0 Or A > 255 Then
            MsgBox("透過度は0から255の範囲にしてください")
            Exit Sub
        End If
        If R < 0 Or R > 255 Then
            MsgBox("色Rは0から255の範囲にしてください")
            Exit Sub
        End If
        If G < 0 Or G > 255 Then
            MsgBox("色Gは0から255の範囲にしてください")
            Exit Sub
        End If
        If B < 0 Or B > 255 Then
            MsgBox("色Bは0から255の範囲にしてください")
            Exit Sub
        End If

        'MsgBox(A.ToString + "," + R.ToString + "," + G.ToString + "," + B.ToString)
        Dim C As Color
        Try
            C = Color.FromArgb(A, R, G, B)
        Catch ex As Exception
            MsgBox("色が不正です")
            Exit Sub
        End Try

        'PictureBox1に描画
        Dim gg As Graphics = PictureBox1.CreateGraphics()
        Dim bw = New SolidBrush(Color.White)
        gg.FillRectangle(bw, 0, 0, 200, 200)

        Dim i, j, k As Integer
        Dim bg = New SolidBrush(Color.LightGray)
        k = 1
        For i = 0 To 6
            For j = 0 To 6
                If k = 1 Then
                    gg.FillRectangle(bg, 20 * i, 20 * j, 20, 20)
                End If
                k = k * -1
            Next
        Next
        '半透明のブラシを作成する
        Dim br = New SolidBrush(C)
        gg.FillRectangle(br, 30, 30, 80, 80)
        gg.Dispose()

        'Bitmapを作成する 
        Dim bmp As New Bitmap(W, W)
        Dim gb As Graphics = Graphics.FromImage(bmp)
        gb.FillRectangle(br, 0, 0, W, W)
        gb.Dispose()

        'PNG形式でMemoryStreamに保存しBase64にエンコードする
        Dim ms As New IO.MemoryStream()
        bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Png)
        Dim buffer As Byte() = ms.ToArray
        Dim base64String As String = Convert.ToBase64String(buffer)
        TextBox6.Text = base64String

        'PNG形式でファイルに保存する
        If CheckBox1.Checked Then
            SaveFileDialog1.Filter = "png|*.png"
            If SaveFileDialog1.ShowDialog() = Windows.Forms.DialogResult.OK Then
                Try
                    bmp.Save(SaveFileDialog1.FileName, System.Drawing.Imaging.ImageFormat.Png)
                Catch ex As Exception
                    MsgBox(ex.ToString)
                End Try
            End If
        End If

        bmp.Dispose()

    End Sub

End Class

長くなりましたが半分は入力データのチェック用なので実際の処理はたいした長さではありません。
面倒な処理はVBがやってくれるので簡単です。
ただ、しばらくコーディングをしないと色々忘れてしまうので結構Google先生のお世話になりました。

ついでに、このコードを少しいじって、このページの背景画像も作成しました。

HTML文に埋込

データができたらHTML文を書いてみます。

<table border="1" ><tr
style="background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAUSURBVChTY/j//38DPjwiFPxvAABUZd9BQaoGmwAAAABJRU5ErkJggg==)">
<td>
<br>WHITE.PNG<br><br>
</td></tr></table>

表示するとこうなります

WHITE.PNG





もう一つ別の方法

この書き方でもできます。この方がいいのかな?
結論は、初めからこうしておけば良かったということですね。
HTMLにはバージョンがあって難しいです。
<table border="1" ><tr
style="background-color: rgba( 255, 255, 255, 0.5 )">
<td>
<br>こうなります<br><br>
</td></tr></table>


こうなります











TOPに戻る
2016/4/15