【筆記JS/HTML/CSS】用div實現個性化button，背景半透明

html中的button默認樣式..不太能看，若是調一調背景色和字體的話也挺適合簡潔的頁面設計

因而決定配合JS，用html中的div完成button

最終結果圖：

 

html代碼：（first_passer.png是「過路人」字樣的背景透明圖片）

<div class="button" id="button3"><img id="button3_img" src="images/first_passer.png"></div>

（命名能夠任意）

 

css代碼：

    margin-top: 20%;
    height: 12%;/*長寬應該要按照本身的代碼設置，此處外層有嵌套，因此用百分比*/
    width: 100%;
    border-radius: 10px;
    border: 1px solid black;
    text-align: center;
    background:rgba(255, 251, 240, 0.3); /*R G B opacity*/

 

JS實現的功能：鼠標覆蓋時0.5透明度，離開時0.3透明度，而且讀取瀏覽器寬高，自適應設置div長寬，設置div中圖片高度與div相同，寬度auto。

$("button3_img").style.height = screen.availHeight * 0.70 * 0.7 * 0.12 + "px";

$("button3_img").style.width = "auto";

 

由於div的高度也是根據screen.availHeight的百分比來設置的，因此此處可用screen.availHeight * 0.70 * 0.7 * 0.12表示div高。

 

下面的JS代碼時用來設置鼠標指向和離開button時，背景透明度的變化：

$("button3").onmouseover = passerby_move;

$("button3").onmouseout = passerby_out;

 

function passerby_out() {
    $("button3").style.background = "rgba(255, 251, 240, 0.3)";
}

function passerby_move() {
    $("button3").style.background = "rgba(255, 251, 240, 0.5)";
}

 

PS：差點忘了，此處的$是本身設置的，不是jQuery，代碼以下：

$=function (id) {    return document.getElementById(id);}