CSS | HP制作備忘録

 ホームぺージ制作用メモ

 

HTML | CSS | JavaScript | Perl | PHP |
CSS
0.基本 1.色・画像 2.テキスト 3.レイアウト 4.外部 5.ほか　参考：色の一覧


CSS | HP制作コード備忘録

1.色・画像

　-画像

   -画像を重ねる


0.基本
 
1.色・画像

2.テキスト

3.レイアウト

4.外部

5.ほか　


- HTML

- CSS

- JavaScript

- Perl

- PHP










1.色・画像

1-1　画像




■背景画像の指定

background-image:url("画像のURL");

background-repeat:
　　　repeat-x　横のみ繰り返す
　　　repeat-y　縦のみ繰り返す
　　　no-repeat　１回のみ表示


■透明度　0.0透明　1.0不透明
 {opacity:数字;}

テク1　画像を重ねる

手前側の画像の表示位置をtopとleftで指定
手前側の画像をpng、gifなどの透明度があるものにするのが適切


スタイル側
.kasane-1 {
    position: relative;
}
.kasane-2 {
    position: absolute;
    top: 2px;
    left: 2px;
}


ボディ側
<div class="kasane-1">
 <img src="奥画像のURL" style="width:横サイズ; height:縦サイズ" border="枠線の太さ">
 <div class="kasane-2">
 <img src="手前画像のURL" style="width:横サイズ; height:縦サイズ">
 </div>
</div>


レポリン！｜定番サイト情報