HTML/CSS_ll - Study record

要素の中身全てを透明にする

背景色のみを透明にする

rgbaは4つの値をコンマ（,）区切りで入れる。
4つ目の値が透明にする度合いで、0 ~ 1の数値で指定する（値が小さいほど透明になる）。

/* 0.5が透明度 */
.box{
   Background-color:rab(255,147,30,0.5);
}

rgbは色の指定の仕方の1つで、3つの値の組み合わせで表示する色を決める。
色を指定するときは今まで使用してきた#ffffffのような記法を使ってもrgbを使っても構わない。

/* 以下は同じ色 */
.box{
   Background-color:rab(255,147,30);
}
.box{
   Background-color:#ff931e;
}

transitionを使うと「変化の対象」や「変化にかかる時間」などを指定しアニメーションをつけることができる。
「変化の対象」にはcolorなどのプロパティを指定するが、allを指定すると全てのプロパティに適用出来る。

/* all=変化の対象,1s=変化の時間 */
Div{
Transition:all 1s;
}
Div:hover{
 Background-color:red;
}

HTMLの要素同士は通常重なって表示されることはないが、position: absolute;を使うと、要素同士を重ねて表示することが出来る。
サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定する。また、rightやbottomを併用することも可能。

セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用することができる。
セレクタ:activeというように指定する。

position: fixed;を使うと、常に要素を画面上の指定した位置に固定させておくことができる。
位置は、top、left、right、bottomを使って指定する。

<img src=“aaa.png”
    class=“fixed-img”>

.fixed-img{
        position:fixed;
        top:10px;
        left:40px;

 /* <header>のpositionプロパティをfixedに、topを0に指定→固定 */
header {
  position:fixed;
  top:0;
  
  /* z-indexを10に指定→最前面 */
  z-index:10;
}