設計完MENU後，再來就是我認為一個網頁首頁裡最重要的「LOGO元素」，』ˊ我們今天速戰速決，直接先來成果展示和打了哪些code吧!

成果展示:

code:
.html

<div class="box">
    <li class="nav" id="title">ラブライブ×日本揪團購</li>
</div>

短短一行就跑出好多的效果，都多虧了css呢，好讚讚!
.css

.box{
    width: 100%;
    height: 15%;
    background-size: cover;
    background-attachment: fixed;
    background-size: 100% 100%;
    position:relative;
    color: white;
}

.box::before{
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: url(./Ufv1Otg1U5_small.jpg) fixed center / contain;
    z-index: -1;
    opacity: .5;

}
#title{
    -webkit-text-stroke: 2px rgb(0, 0, 0);
    font-size: 70px;
    z-index: 5;
    text-shadow: #3943B7 5px;
}

可以看到字體像是中間被簍空、背景有照片的效果。

字中間有簍空就是在#title裡，而-webkit-text-stroke裡的px如果越大，就會越粗。

背景有照片是在box::before裡。
那為什麼不直接放在box裡呢?
因為直接放在box裡會連同字的透明度都被調成0.5了，這樣字就會被連同降透明度，因此才另外用::before來放背景照片。
而背景照片會選用cover也是因為這樣的效果最好。cover可以讓圖片不靠repeat就占滿整個內容版面

以上是我開賽的第六天，讓我們來期待第七天的到來吧!
加油、加油! 倒數24天。