opacity 跟 background 差別

• opacity 子元素都會受影響，也會變成透明
• background-color 子元素就不會影響

example

opacity

<style>
.bg{
background: url("/images/alphaBG.png");
width: 800px;
height:600px;
background-position:center;
color:black;
font-size:8rem;
opacity:.6;
}
.bg-txt{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
</style>
<div class='bg'>
    <div class='bg-txt'>
        Test
    </div>
</div>

上面的範例連文字都會有透明

backgroud

<style>
.bg{
background: url("/images/alphaBG.png");
width: 800px;
height:600px;
background-position:center;
color:black;
font-size:8rem;
}
.bg-txt{
width:100%;
height:100%;
background: rgba(255,255,255,.3);
display:flex;
justify-content:center;
align-items:center;
}
</style>
<div class='bg'>
    <div class='bg-txt'>
        Test
    </div>
</div>

文字不會透明了，只有背竟有透明一點

參考資料

CSS Opacity VS Alpha | Opacity 跟 Alpha的差異 | 調整透明度 CSS實現背景圖片透明，文字不透明效果

繼續閱讀

最近剛好在使用 fetch 代替 ajax ，剛好遇到了一些小問題，所以寫下來提醒一下自己

fetch 是一個新的 API 可以讓我們可以去做 AJAX ，而且用起來更直觀

當要使用 fetch 來做 POST 我們可以用以下的寫法:

fetch(URL,{
    method:'POST',
    method: 'cors'  // 用來作為 跨域請求用的
})

這樣就可以使用 fetch 發出 POST 的請求，當我們要附上資料時，可以用 FormData 這一個 class 來帶上我們的資料

const fd = new FormData([可以直接指定 dom 元素是 form 的])

const fd = FormData();
fd.append('key',value);

可以用以上兩種方法來給 FormData 資料

最後只需要把 FormData 帶入 fetch 中的欄位，就可以成功帶上資料了

fetch(URL,{
    method:'POST',
    method: 'cors',  // 用來作為 跨域請求用的
    body: fd
})

這邊不需要去指定 Content-Type ，因為 fetch 會幫我們帶上適當的屬性

繼續閱讀

環境要求 os ubuntu 18.04.1 apache mysql php moodle 3.x 安裝教學 用來建立 server 用的 apache 更新套件 sudo apt update 安裝apache sudo apt install apache2 讓 apache 可以通過防火牆之前，先看一下 sudo ufw app list 現在讓 apache 可以通

繼續閱讀

環境要求 jdk-11 apache-maven-3.5.2 apache-tomcat-9.0.17 install openjdk sudo add-apt-repository ppa:openjdk-r/ppa sudo apt update sudo apt install openjdk-11-jdk java -version #看一下版本跟有無安裝成功 install tomcat Create Tomcat User sudo groupadd tomcat #創建一個 tomcat 群組 sudo useradd -s /bin/false -g tomcat -d /opt/tomcat tomcat #創建一個較 tomcat 的使用者

繼續閱讀

最近重新架 PHP 的環境，在使用 session 的時候發現了問題，當我在這個網頁設定了 session 後， 當我跳轉到另一個網頁後，發現 session 不見了!!!!

我確認了一下我有沒有開啟 session(session_start()) ， 也確認了我是在同一個網域底下，結果是我在其中一個關鍵的 php 檔案沒有開啟…

於是我上網找了一下有沒有可以避免的方法，發現是 session.auto_start ，它可以自動幫我們開啟 session ，這樣就不會有時忘了開了，可以在 php_info() 中找找看，如下圖，如果確認沒有開後，可以到 php.ini 裡去改掉他

session.auto_start=1 這樣應該就可以了

繼續閱讀

在 HTML 裡的每個元素都有一個 box-model，而 box-model 是用來表達一個元件的呈現方式，在 CSS 裡可以用 box-sizing 這個屬性去設定，以下是他可以設定的值 content-box –> 預設的模

繼續閱讀

以下是網站無障礙規範 2.0 的內容 我把 AA 級的規範盡量拿出來，如果要達到 AAA 級，仍需到網站無障礙規範 2.0參考 1. (替代文字)為任何非文字的內容提供相等

繼續閱讀