HTML/CSS

CSS3 Styles

Multiple Backgrounds

這個CSS3的新屬性可以做出圖片重疊的效果
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
     background-image:url(bg1.png),url(bg2.png);    --以逗點分隔兩個圖片的設定
     background-position:top left,center right;
     background-repeat:no-repeat,no-repeat;
}
這也可以縮寫為
{
     url(bg1.png) top left no-repeat,
     url(bg2.png) center right no-repeat;
}

Color

在CSS3中color也增加了兩種新屬性，分別是RGBa、HSLa
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
    color:rgba(255,255,255,0.75)     --前三個值為0~255與過去相同，但不可以使用十六進制(ff、6c)，最後一個值為不透明度0~1，0表示完全透明，1表示完全不透明
}
{
    color:hsla(120,0%,50%,0.6)     --依序為色相值(0或360紅色、60黃、120綠、240藍)，飽和度(0%~100%)，亮度(0%~100%)，不透明度(0~1)
}

Opacity

opacity是不透明度的屬性值，可以用它來設定不透明度(0~1)，0是完全透明，1是完全不透明
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{

     opacity:0.45;     --0~1

}

<div class="element">
     <h2>
          Hello.
     </h2>
</div>
.element{
     background:url(bg1.png) center no-repeat;
     opacity:0.45;
}

整張圖片(含字)都會變透明

Gradients

在CSS3中也新增了漸層色的功能，分別是Linear-gradient 線性漸層、Radial-gradient 放射狀漸層

Linear-gradient

{

     background:linear-gradient(to bottom ,red ,yellow);     --輸入值為漸層角度、起始色、結束色

}

to bottom表示從上往下，這裡也可以輸入deg(角度)

red,yellow 表示從紅色到黃色，也可以是red 70%,yellow 30% 代表70%是紅色30%是黃色

0deg      --to top(往上)

90deg    --to left(往左)

180deg  --to bottom(往下)

270deg  --to right(往右)

Radial-gradient 

radial-gradient用以建立放射狀漸層，輸入值為radial-gradient(<shape> <size> at <position> ,<color-stop>s)，其中size有四種特別字可使用：closest-side、closest-corner、farthest-side、farthest-corner(預設)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -




{
     background:radial-gradient(circle at top left,aqua,blue);
     --從左上開始漸層的圓形
}

{
     background:radial-gradient(aqua,blue);
     --預設從中間開始漸層
}