liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0の各種修飾 - 色表示

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> 色表示 </title>
   <style type="text/css">
        div>div{
            width: 400px;
            height: 40px;
        }
    </style>
</head>
<body>
<script type="text/javascript">
   for (var i = 0; i < 110 ; i++)
   {
       document.write("テスト文字");
   }
</script>
<div style="position:absolute;top:0px">
    <div style="background-color:gray;">background-color:gray</div>
    <div style="background-color:#aaa;">background-color:#aaa;</div>
    <div style="background-color:#ffff00;">background-color:#ffff00;</div>
    <div style="background-color:rgb(255, 0 , 255);">
        background-color:rgb(255, 0 , 255);</div>
    <div style="background-color:hsl(120, 80%, 50%);">
        background-color:hsl(120, 80%, 50%);</div>
    <div style="background-color:rgba(255, 0 , 255 , 0.5);"></div>
    <div style="background-color:hsla(120, 80%, 50% , 0.5);"></div>
</div>
</body>
</html>

※rgba(255, 0 , 255 , 0.5)
 hsla(120, 80%, 50% , 0.5)は半透明を設定しているので、文字が見えるね。

f:id:liguofeng29:20160129215759p:plain