iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
自我挑戰組

html與css粗淺新手入門教學系列 第 23

css opacity

opacity是用來控制物件透明度的屬性,參數設定從0.0到1.0,數字越小越透明
今天設定三個同樣顏色的方塊來觀察透明度的變化,css的設定如下

        .box1, .box2, .box3{
            height: 300px;
            width:300px;
            color: white;
            font-size: 30px;
            display: inline-block;
            background-color: rgb(255, 199, 162);
        }

各個方塊的css設定如下

        .box1{
            opacity:0.1;
        }
        .box2{
            opacity:0.5;
        }
        .box3{
            opacity:0.8;
        }

網頁顯示效果
https://ithelp.ithome.com.tw/upload/images/20210923/20140086iYQmdHipKc.jpg


上一篇
css visibility
下一篇
css linear-gradient
系列文
html與css粗淺新手入門教學30

尚未有邦友留言

立即登入留言