關於CSS自訂義樣式"highlight"，桌面與行動裝置如何同步

css

pinwayne 2023-03-04 00:03:47 ‧ 1357 瀏覽

分享至

我在網路上查詢到
在網頁中想要用Highlight的方式做一些重點說明

如圖
用響應桌面模式觀看的時候顯示上正常

如圖
不過用平板、手機模式切換的時候，標註就會不如預期

HTML的編排如圖

下方是我的CSS碼
.highlight{
position: relative;
}
.highlight:before{
content: "";
z-index: -1;
position: absolute;
height: 0.55em;
top: 0.55em;
background: gold;
width: 100%;

/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";

/* IE 5-7 */
filter: alpha(opacity=55);

/* Netscape */
-moz-opacity: 0.55;

/* Safari 1.x */
-khtml-opacity: 0.55;

/* Good browsers */
opacity: 0.55;
}

我是CSS新手，自己嘗試編排網頁做一些優化，希望各位大大可以解答

ccutmis iT邦高手 2 級 ‧ 2023-03-04 01:58:05 檢舉

你要做的這個也可以利用漸層背景達到很接近的效果，而且跨平台不太會出問題，舉個例:

<style>
.highlight{
background: rgb(255,255,255);
background: linear-gradient(180deg, #fff 0%, #fff 50%, gold 50%, gold 100%);
}
</style>
<p>
<span class="ahighlightaa">test ... test</span> ... test.. ..
</p>

參考資源:
https://cssgradient.io/

pinwayne iT邦新手 5 級 ‧ 2023-03-06 14:55:01 檢舉

大大您好，這個方式確實跨平台不會有出問題
正在綜合嘗試中

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

小哈片刻

iT邦研究生 4 級 ‧ 2023-03-04 05:42:20

這個應該是換行的問題，並不是手機上特別不一樣。
因為span的display是inline的，所以參考了它的width並不準。
你可以把.highlight的display設成block試試。

或是也可以試試這樣

.highlight {
  text-decoration: 10px underline yellow;
  text-underline-offset: -8px;
}

若是要和文字大小等比例

.highlight {
  text-decoration: 0.5em underline yellow;
  text-underline-offset: -0.4em;
}

回應 3
分享
檢舉

pinwayne iT邦新手 5 級 ‧ 2023-03-06 13:24:23 檢舉

這個方法可行，感謝分享!!

pinwayne iT邦新手 5 級 ‧ 2023-03-06 13:46:13 檢舉

不過這個方式
想請問要如何讓底線在不同的文字大小中，顯示出一樣的底線比例呢

舉例來說

我部份底線會用在標題
部分會用在內文
但希望底線高度與寬度比例是一樣的

感謝大大回覆

小哈片刻 iT邦研究生 4 級 ‧ 2023-03-06 20:30:30 檢舉

可以用em (和文字的比例)，例如

.highlight {
  text-decoration: 0.5em underline yellow;
  text-underline-offset: -0.4em;
}

登入發表回應

thomasbally001

iT邦見習生 ‧ 2023-03-05 14:07:45

你好：我用 html 提供的元素做。
底線標註
會將文字highlight，唔知係咪你想要嘅效果呢？

回應 1
分享
檢舉

pinwayne iT邦新手 5 級 ‧ 2023-03-06 13:46:36 檢舉

您好請問是什麼方式呢，期待您解說

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙