你知道嗎?有了CSS3,就算不用javascript,我們也可以製作出圖片輪播效果。今天這篇文章就要示範如何單純使用CSS3及HTML製作圖片輪播效果。
要製作純 CSS的輪播效果、就要先充份了解 CSS3 的 transitions 和 animation
CSS3 TRANSITIONS
一般當CSS屬性改變的時候、變化的效果是立即的。但是有了CSS3 transitions之後,我們可以達到漸變的動畫效果。
屬性 | 說明 |
---|---|
transition-property | 定義套用漸變的屬性名稱 |
transition-duration | 定義完成漸變效果的時間 |
transition-timing-function | 定義漸變效果的速度曲線 |
transition-delay | 定義漸變效果開始的時間 |
transition | 定義漸變效果屬性的簡寫屬性 transition: property duration timing-function delay; |
Property | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Chrome for Android |
---|---|---|---|---|---|---|---|---|---|
-webkit-transition | – | 4+ | 4+ | 3.1+ | 11.5+ | 3.2 + | – | 2.1+ | – |
transform | 10+ | 31+ | 31+ | 7+ | 27+ | 7.1 + | – | 4.4+ | 41+ |
W3C Animatable Properties詳細列出了哪些CSS屬性可以套用漸變的效果。
讓我們實際用CSS3 transitions來做一個滑鼠滑入的效果
<div class="eg-CSS3-transitions">
滑鼠滑上來看看<br>
使用CSS3 transitions漸變效果
</div>
<div class="eg-normal">
滑鼠滑上來看看<br>
沒有CSS3 transitions漸變效果
</div>
當滑鼠移到<div class="eg-CSS3-transitions>
及<div class="eg-normal>
的上面時、該區塊的寬度由原本的250px、變為300px
div.eg-CSS3-transitions,
div.eg-normal {
width: 250px;
padding: 15px;
background-color: #83CDBE;
margin: .5em;
box-sizing: border-box ;
color: #fff;
}
div.eg-CSS3-transitions:hover,
div.eg-normal:hover {
width: 300px;
}
div.eg-CSS3-transitions {
-webkit-transition: width 1s;
transition: width 1s;
}
試試看完成的CSS3 transitions的效果
使用CSS3 transitions漸變效果
沒有CSS3 transitions漸變效果
CSS3 ANIMATIONS
CSS3 transitions幫我們實現了從A到B的漸變效果;CSS animation則是進一步讓我們控制漸變效果的時間、週期、和關鍵的時間點,從而達成A到B到C、再回到A這種不斷循環執行的動畫效果。
屬性 | 說明 |
---|---|
@keyframes | 定義在一個動畫週期間的”關鍵的時間點”(觀念類似flash中的關鍵影格)。 以百分比來表示時間:0%是動畫的開始,而100%則是動畫的結束。在動畫執行基間、可以任意添加”關鍵的時間點” |
animation | 所有動畫屬性的簡寫屬性,( animation-play-state 除外)。 transition: property duration timing-function delay; |
animation-name | 定義 @keyframes 動畫的名稱。 |
animation-duration | 定義動畫完成一個周期的時間,預設是0。 |
animation-timing-function | 定義動畫的速度曲線。預設是 “ease”。 |
animation-delay | 定義動畫開始的時間。預設是 0。 |
animation-iteration-count | 定義動畫播放的次數。預設是 1。 |
animation-direction | 定義動畫在下一個週期是否逆向動作。預設是 “normal”。 |
animation-play-state | 定義動畫的狀態是正在運行還是暫停。預設是 “running”。 |
animation-fill-mode | 定義對象在動畫時間之外的狀態。 |
Property | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Chrome for Android |
---|---|---|---|---|---|---|---|---|---|
-webkit-animation | – | 5+ | 4+ | 4+ | 15+ | 3.2 + | – | 2.1+ | 41+ |
animation | 10+ | 31+ | 43+ | – | – | – | – | – | – |
就像flash動畫的關鍵影格一樣,@keyframe 包含了時間點及發生何種變化的資訊。例如有一個動畫、他的動畫週期開始時顏色為黃、動畫執行到50%時顏色為紅、動畫結束時顏色又改為黃。這是一個由黃變紅再由紅變黃、不停變化的動畫。剛提到的開始、結束、黃、紅等時間和顏色的資訊、就是@keyframe所要定義的資訊。
有了CSS3 transitions和CSS animation,就算沒有flash或javascript、也能直接在網頁中建立動畫效果哦。
實作純css的slider
掌握了基本的CSS3 transitions和CSS animation、我們就可以開始準備製作純css的slider了。接下來我們要示範如何利用CSS3 transitions和CSS animation製作一個dissolve效果(溶接效果)的圖片輪播器。
Step 1:先將圖片就定位
HTML Markup
<div class="slider_container">
<div>
<img src="images/image1.png" alt="pure css3 slider" />
<span class="info">Image Description 1</span>
</div>
<div>
<img src="images/image2.png" alt="pure css3 slider" />
<span class="info">Image Description 2</span>
</div>
<div>
<img src="images/image3.png" alt="pure css3 slider" />
<span class="info">Image Description 3</span>
</div>
<div>
<img src="images/image4.png" alt="pure css3 slider" />
<span class="info">Image Description 4</span>
</div>
<div>
<img src="images/image5.png" alt="pure css3 slider" />
<span class="info">Image Description 5</span>
</div>
</div>
CSS Style
.slider_container {
margin: 30px auto;
width: 400px;
height: 280px;
position: relative;
border: 20px solid;
border-color: #fff;
border-bottom-width: 100px;
background-color: #f5f5f5;
box-shadow: #666 0 0 5px;
}
.slider_container div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
}
Step 2:確認輪播效果的時間軸
先決定過場時間(前後兩張圖片重疊的時間)、每張圖片播放的時間、完成一個週期需要多少時間。
由上圖我們知道我們的輪播器共有5張圖片,過場時間為1秒、每張圖片播放4秒、一個完整的週期是25秒。因為@keyframe的時間是以百分比來表示,因為我們要先把秒換成百分比。
100% / 25秒 = 4% ( 每秒)
4% = 1秒
CSS3 Keyframes Animation
設定動畫週期。
.slider_container div {
-webkit-animation: round 25s linear infinite;
animation: round 25s linear infinite;
}
@-webkit-keyframes round {
4% {
opacity: 1;
filter: alpha(opacity=100);
/* 0 - 1秒 淡入*/
}
20% {
opacity: 1;
filter: alpha(opacity=100);
/* 1- 5秒靜止*/
}
24% {
opacity: 0;
filter: alpha(opacity=0);
/* 5-6秒淡出*/
}
}
@keyframes round {
4% {
opacity: 1;
filter: alpha(opacity=100);
/* 0 - 1秒 淡入*/
}
20% {
opacity: 1;
filter: alpha(opacity=100);
/* 1- 5秒靜止*/
}
24% {
opacity: 0;
filter: alpha(opacity=0);
/* 5-6秒淡出*/
}
}
每張圖片進場時間相隔5秒
.slider_container div:nth-child(5) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.slider_container div:nth-child(4) {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.slider_container div:nth-child(3) {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.slider_container div:nth-child(2) {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
.slider_container div:nth-child(1) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
CSS transition
當滑鼠移到圖片上時、底下出現 “Image Description” 字樣且輪播動畫暫停。當滑鼠離開時、”Image Description” 字樣且輪播動畫繼續播放。
.slider_container span {
color: #000;
background: #fff;
position: absolute;
left: 0%;
top: 280px;
width: 400px;
height: 100px;
font-size: 30px;
text-align: center;
line-height: 100px;
-webkit-transform:scaleY(0);
-ms-transform:scaleY(0);
transform:scaleY(0);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.slider_container:hover span {
width: 100%;
-webkit-transform:scaleY(1);
-ms-transform:scaleY(1);
transform:scaleY(1);
}
Pause And Restart
當滑鼠移到圖片上時,暫停播放動畫。
.slider_container:hover div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
完成的實例:
這是一個很簡單的輪播動畫、如果你需要新增或減少圖片的話,別忘了讓每張圖片進場的時間相隔5秒,一個動畫週期的時間也要重新定義。記得要重新計算1秒等於多少百分比。
另外、在實際的應用上仍需要考慮瀏覽器的支援性。這一個播放器是我之前在做一個手機網頁時寫的,當時的版本比較簡單、只有無限循環播放而已。因為是手機網頁、所以只需考慮行動裝置的瀏覽器。對行動裝置來說、這個輕巧的圖片輪播器,執行起來挺順暢的!
2019/5月 更新
為純CSS的輪播動畫加上響應式效果:
Bootstrap 的作法:
//外層的響應式容器
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
padding-bottom: 56.25%;
}
//被嵌入的內容
.embed-responsive .embed-responsive-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
增加的CSS
.rwd_slider_container_wrapper {
width: 440px;
max-width: 100%;
box-sizing: border-box;
box-shadow: #666 0 0 5px;
padding: 20px;
margin: 0 auto;
}
.rwd_slider_container {
position: relative;
display: block;
height: 0;
padding: 0;
box-sizing: border-box;
padding-bottom: calc(70% + 100px);
}
.rwd_slider_container .slider_container {
box-shadow: none;
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
box-sizing: border-box;
border: none;
background-color: transparent;
}
.rwd_slider_container .slider_container div {
width: 100%;
line-height: 0;
}
.rwd_slider_container .slider_container span {
top: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
HTML的修正如下:
<div class="rwd_slider_container_wrapper">
<div class="rwd_slider_container">
<div class="slider_container">
.........
</div><!-- end of .slider_container -->
</div><!-- end of .rwd_slider_container -->
</div><!-- rwd_slider_container_wrapper-->
將轉場效果變為左右滑動
@-webkit-keyframes round {
4% {
opacity: 1;
filter: alpha(opacity=100);
left: 0;
/* 0 - 1秒 滑入*/
}
20% {
opacity: 1;
filter: alpha(opacity=100);
left: 0;
/* 1- 5秒靜止*/
}
24% {
opacity: 1;
filter: alpha(opacity=100);
left: -100%;
/* 5-6秒滑出*/
}
26% {
opacity: 0;
filter: alpha(opacity=0);
left: -100%;
/* 6-6.5秒變透明*/
}
28% {
opacity: 0;
filter: alpha(opacity=0);
left: 100%;
/* 6.5-7秒回到起始位置*/
}
}
.slider_container:before {
content: '';
display: block;
position: absolute;
top: 0;
left: -100%;
opacity: 1;
filter: alpha(opacity=100);
width: 100%;
height: 100%;
background-image: url(bk-image.jpg);
animation: bk 25s linear;
}
@keyframes bk {
0% {
left: 0;
/* 初始位置*/
}
4% {
left: -100%;
/* 0 - 1秒 滑出*/
}
}
@keyframes bk {
0% {
left: 0;
/* 初始位置*/
}
4% {
left: -100%;
/* 0 - 1秒 滑出*/
}
}
你好 不好意思 想請問一下 這個輪播 可以用在背景裡嗎?! 要怎麼樣把這程式碼寫在css 裡呢 希望你能撥空回答 感謝你
作背景輪播最快的方式就是把做好的圖片輪播以z-index的方式向下拉。
假設我要做一個滿版的背景輪播
那就幫slider_container再加上底下的屬性就可以了
喔喔!! 感謝您 謝謝了 z-index: -1; 的意思就像排版的 往下放一層是吧?! 感謝您的回答
不是放下一層的意思,是layer 排序的第負一層,就像一座大廈,
z-index: 0; 是地面,是預設
1以上是向天發展
-1以下是向地底發展
而user就是鳥瞰的,就像一隻鳥在天上望下來,假設你有99層,就先看到99層的東西,如果頭重腳輕的話,就只能望到第99層的東西;反之,99層是很少/有alpha channel,就可以看到更下層的東西。
只要用簡單的3D原理想,再用2D形式來表達。
您好,覺得您的文章很棒,也使用了這個效果,請問可以將內容備份到自己的網站嗎?
相當感謝!
記得載明出處並提供連結就好
請問我更換圖檔為何沒有出現我圖檔輪播
您好、之前範例有點問題,我重新整理過來、您再試試。
Ellen大大您好,我在套用您的圖片至部落格時想將圖片弄成滿版。
但無論是您上面提供的方法或是用100%,又或者是vw、vh,滿版圖片都會遮住文章區塊,不知如何是好?
我的圖片輪播是放在header區塊的下面。
請問有什麼好辦法可以解決這樣的問題嗎?
試試看position: fixed; z-index: -1
><不好意思 想請問一下 我想製作slide但是所有圖片都沒有乖乖在框框裡面 而是散路在介面
想請問我哪裡出問題
您好、之前範例有點問題,我重新整理過來、您再試試。
你好 因為畢業專題需要 能否使用您的程式碼在專題網頁上使用?謝謝
請取用 ^^。
您好,我在圖片位置輸入網址連結,圖片一直無法顯示出來,請問是甚麼原因,謝謝。
您好、之前範例有點問題,我重新整理過來、您再試試。另外這個範例不支援連結哦。
您好 你的圖片輪播做得很好 可是我不知道為什麼用不上 divimg和divspan 圖片輪播的時候總是顯示第一張閃過 其他圖片輪播不了 請問是哪一個步驟做錯了嗎?希望你能回答 謝謝你
您好,之前貼的範例有點問題,我重新整理過了。
請問您如何在滑鼠移到圖片上時,除了暫停播放動畫,當按下圖片時,可以連到另一個網頁?
這個範例目前做不到連結的效果,因為所有的圖片實際上一直重疊在一起、只是暫時隱藏而已,所以只有最後一張圖片的連結能被點擊到。改天我再把加上連結效果的範例丟上來。
大大您好 想再次請教您 如何限定字體的出現壓在圖片的下底層就好了呢? 感謝您
不好意思、我不太理解,您說的字體是指”Image Description”嗎?壓在圖片的下底層是指”文字要被圖片蓋掉”??
我想請問一下
hover後顯示的description時間會和pause連動嗎?
有時候我hover一下子 移開後下一張要過特別久才會顯現
而且有時候hover顯示的description不是該張的(例如顯示第二張圖時hover,description變成第五張的,移開後還是第二張圖)
您好,要給我連結才能幫你看問題出現在哪裡哦。
Ellen 大您好,
想請問一下,我是否可以在 Outlook 2010 下面,看到這樣的圖片動態輪播效果?
我之前測試過 Java & GIF 都無法顯示。(不確定是否公司MIS鎖定或是 Outlook 不支援)
你試著照這方法操作看看 如何解決 Outlook 2007 / 2010 郵件中 GIF 動畫無法播放 (一點通系列)
請問,如果圖片不要過場時間,
快速地換圖片
以一張0.03秒的速度播放
Keyframes要如何設定呢?
你說的是gif動畫的感覺嗎?那完全是另外一種概念囉,這個範列不適合
唔好意思呀!我想問一問CSS部份是Copy所有Code於一個css的檔案就可以了?還是分開幾個檔案啦?
css 放同一個檔案就可以了
Ellen 大您好,
我使用了您的範例做背景圖輪播,但在mac Safari發生一個bug:點選綠色視窗縮放的按鈕後,輪播會停止(圖片都消失),過了一會才又開始輪播,然後輪播一輪回後又會空白一陣子再繼續播,請問您在safari有遇到這個問題嗎?
我沒有在mac上測過,有連結嗎?幫你瞧瞧。
請問如果我只要4張照片罷了,要改什麼?
我試過slider_container那邊只放4張照片,但是他還是5張照片輪播
從第二個步驟(確認輪播效果的時間軸)開始就要重新計算了哦。四張圖片的一個週期(100%)應該是20秒,所以1秒=5%。以此類推,所有的數字都要重新計算過。
如果我要加一個span的字體 在照片外面的 請問要如何改?
不太懂您的需求耶,「在照片外面」是什麼意思。
請問怎樣可以使圖片和文字一起達成輪播效果?
把文字的 transform 和 transition 屬性全拿掉就可以了
請問一下怎麼把背景的框框去掉
border 拿掉就好
非常謝謝你的提供! 上到了一課! 感謝你!!正好工作很需要!
不客氣 ^^
您好 想詢問做好的輪播,結果它會隨著網頁卷軸拉上拉下跟著跑動,請問有甚麼解決辦法?
如果是要做滿版的效果,可以參考為純CSS的輪播動畫加上響應式效果,將外層的響應式容器設定成滿版。可以這樣子設定:
.rwd_slider_container_wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
想請問一下,按照您的走向是不會有任何問題,是置中狀況呈現,想詢問如果想讓它在水平靠左要如何更改? 謝謝
slider_container 裡的 margin: 30px auto; 拿掉就可以了
Ellen大你好,
我參考本文寫了一個圖片推入效果的CSS動畫
用瀏覽器預覽結果,動畫正常播放但總是最後一張圖片顯示在最上層
如果加入animation-fill-mode屬性
不論是backwards或both,只有第一回播放會是正確的
能不能麻煩你指導一下我哪裡寫錯了
CSS原始碼 https://pastebin.com/pkuw2utX
HTML原始碼 https://pastebin.com/1cJRyMmW
你少了圖片滑出的動作,可以參考將轉場效果變為左右滑動
你好
最近剛學做網頁
現在用GOOGLE的平台做得很有心得
現在想要做圖片輪播
但是一直無法實現理想
看了你的文章 儘管我在複製貼上修修改改都無法達到您的輪播效果
想請您是否可以教學一下
以下是GOOGLE協作平台的嵌入訊息
“在協作平台上新增 HTML、CSS 或 JavaScript 程式碼
1. 使用電腦在新版 Google 協作平台中開啟協作平台。
2. 依序按一下右側的 [插入] 然後 [嵌入]。
3. 按一下 [嵌入程式碼]。
4. 新增程式碼,然後點選 [下一步]。
JavaScript 程式碼必須放在 標記內。
CSS 程式碼必須放在 標記內。”
第四點我也照做了 但就是不行…
或許我的問題很淺….. 但真心想學習 …. 如能有答案 我萬分感激(跪)
我沒有在用google協作平台哦,有網頁嗎?可以幫你看一下,找一下原因。
你好 我已完成你教導的輪播了 真是萬分感激 從不會到會 非常感動
現在有個問題想請教
請問 做好的輪播圖片 可以把它弄成響應式的嗎? 盼回復 ~非常感謝 ~~>///<
新增了響應式的範例,請笑納 ^^
為純CSS的輪播動畫加上響應式效果
您好,這個程式有辦法改成動態輪播圖片嗎?
我要輪播前才指定圖片所在的資料夾,資料夾中的圖片檔都要一一輪播,有辦法改嗎?
您說的要靠js才有辦法做到,這個範例是純CSS的輪播,必須要先確認有幾組圖片,算好時間和動作才行。
Ellen你好,謝謝您上方的教學,照著學習已經成功了^口^
另外想要請教大大以下問題:
1.因目前此語法是轉場是”淡出”的效果,請問這部分有辦法寫出其他效果嗎?(例如左右滑動之類的?)
2.雖然會自動輪播,但沒有左右箭頭可以手動切換,請問這個部分該如何另外寫左右箭頭的語法呢?(或是寫在下方變成輪播的點點,點擊可以手動切圖)
1. 左右滑動的效果請參考這裡:將轉場效果變為左右滑動
2. 手動切圖就要用到js了,純CSS沒辦法達成。
您好請問我在每張圖片上加上超連結,但圖片輪播時,超連結永遠只是最後一個連結,不知該如何修改?? 感謝!!
如果想要加上連結,要用滑動效果的版本才行。原始淡入淡出效果的版本, 最後一張圖始終壓在最上層,只是暫時隱藏而已。所以無論如何點擊都會點擊在最後一張圖上。
請問可以讓我放在專題網頁嗎 謝謝
放吧,記得幫我載明出處、宣傳一下就好 ^^
您好 請問這個功能是否在IE當中會無法正常顯示呢
我在其他瀏覽器都使用正常 只有IE會出現第一張圖之後無法顯示的問題
感謝您
在 IE 11上是ok的,文章最前面那個輪播就是一個範列,您可以直接用IE 11開這個網頁來試看看。純CSS3的圖片輪播效果
很不錯的介紹
但淡出淡入時間要自己算出來不太友好
因為是”純css”,所以要自己算
您好!想問一下,如果是放在封面要變大要如何修改?
我怎麼改px都不會變@@
如果您是使用響應式的版本、要去改rwd_slider_container_wrapper的寬度
請問可以讓我放在我的功課(專題網頁)嗎 謝謝
請慢用
想請教大神
.slider_container div {
-webkit-animation: round 25s linear infinite;
animation: round 25s linear infinite;
其中的round 是animation_name,而linear是代表捨麼意思?
linear 是動畫播放速度的曲線、表示等速變化。
您好針對你上面寫的,我想要輪播八張圖,一張播3秒,過場時間1秒,一個完整週期是32秒,以下是我改的code,但發現在輪播時有一張圖第一次會出現,之後一直發生會少一張圖,可以幫我看看是哪出了問題嗎?
.coverflow {
width: 280px;
height:200px;
position: relative;
}
.coverflow div{
display: block;
position: absolute;
top:0%;
left:0%;
opacity: 0;
filter: alpha(opacity=0);
/*CSS3 Keyframes Animation*/
/*當圖片數量增加,影片長度需更改,變為5s*圖片數量*/
-webkit-animation: silder 32s linear infinite;
animation: silder 32s linear infinite;
}
/*.coverflow>a>img{
max-width: 100%;
}
/*動畫關鍵影格*/
@-webkit-keyframes silder { /*多了可以支持safari、ios、android*/
3.125% {
opacity: 1;
filter: alpha(opacity=100);
}
12.5% {
opacity: 1;
filter: alpha(opacity=100);
}
15.625% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@keyframes silder { /*只能支持IE、Firefox、chrome*/
3.125% {
opacity: 1;
filter: alpha(opacity=100);
}
12.5% {
opacity: 1;
filter: alpha(opacity=100);
}
15.625% {
opacity: 0;
filter: alpha(opacity=0);
}
}
/*每個圖片各延遲5秒*/
div.coverflow div:nth-child(8) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
div.coverflow div:nth-child(7) {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
div.coverflow div:nth-child(6) {
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
div.coverflow div:nth-child(5) {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
div.coverflow div:nth-child(4) {
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
div.coverflow div:nth-child(3) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
div.coverflow div:nth-child(2) {
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
div.coverflow div:nth-child(1) {
-webkit-animation-delay: 28s;
animation-delay: 28s;
}
/*滑入時停止播放*/
div.coverflow:hover div{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
檢查看看html的部份、是不是放了超過8張的圖
想請問一下若是想要加入左右控制的js效果,是不是code就會完全不一樣了呢?
從學習的角度來說,可以在現有的基礎上再加上javascript,
從實作的角度來說,找現有的套件會比較實在。
您好,HTML img size 圖片尺寸可以透過width和height來設定,
所以我想要調整所有圖片的尺寸,請問css要怎麼寫呢?謝謝。
就是說我原本圖片都是1080X2280,
我想把他們在網頁上是360X760之類~
加個!important 強制覆寫。