成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于在一段文本上加修飾劃線的效果

wthee / 3512人閱讀

摘要：最近遇到一個(gè)需求，要在一段文字上面加上一條背景色。類似于上學(xué)時(shí)候用的記號(hào)筆做筆記一樣的效果。第二種和第一種類似還是依靠漸變效果，不過(guò)是從左到右的實(shí)現(xiàn)。元素相對(duì)定位，偽類絕對(duì)定位，設(shè)置來(lái)實(shí)現(xiàn)覆蓋住文字的效果。

最近遇到一個(gè)需求，要在一段文字上面加上一條背景色。類似于上學(xué)時(shí)候用的記號(hào)筆做筆記一樣的效果。
第一映像想到的可能是text-decoration: line-through；不過(guò)這里有一個(gè)問(wèn)題，先上圖：

放學(xué)啦啦
#s5{
  text-decoration: line-through;
}
#s5 span{
  font-size: 60px;
}

很明顯因?yàn)槲淖执笮〔灰恢?，?dǎo)致line-through的位置會(huì)錯(cuò)位。

再看下圖的解決辦法，這里就沒(méi)有改變個(gè)別文字的大小了。小伙伴們自己可以動(dòng)手試一試。

附上代碼：


  雯子同學(xué)
  丸子同學(xué)
  早上好，老師
  早上好， 同學(xué)們

div {
    font-size: 40px;
}
#s1 {
    background-image: linear-gradient(to bottom, #fff 45%, #0aa 45%, #0aa 60%, #fff 60%);
}
#s2 {
    background-image: linear-gradient(to right, blue, blue 100%);
    background-position: 0 50%;
    background-repeat: repeat-x;
    background-size: 100% 7px;
}
#s3 {
    border-bottom: 8px solid red;
    display: inline-block;
    height: 26px;
}
#s4 {
    position: relative;
}
#s4:after {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    display: block;
    width: 100%;
    border: 5px solid yellow;
}

第一種借助了linear-gradient實(shí)現(xiàn)從上到下的漸變效果，通過(guò)屬性巧妙的達(dá)到銳變的效果。

第二種和第一種類似還是依靠漸變效果，不過(guò)是從左到右的實(shí)現(xiàn)。比起第一種可調(diào)性更大。花樣更多一點(diǎn)。

第三種也是一種很不錯(cuò)，用的比較多的方法。就不過(guò)多解釋了。

看到這里各位小伙伴們，有沒(méi)有發(fā)現(xiàn)一個(gè)問(wèn)題。哪天設(shè)計(jì)過(guò)來(lái)說(shuō)，你這線怎么在文字后面，不是說(shuō)讓你劃掉那段文字嗎？？？這下尷尬了。
在這里我要介紹第四種了哈哈哈

通過(guò):after或者:before。元素相對(duì)定位，偽類絕對(duì)定位，設(shè)置border來(lái)實(shí)現(xiàn)覆蓋住文字的效果。

好啦，到這里就算是講完了。寫(xiě)的有點(diǎn)爛，CSS一直是我的弱項(xiàng)。希望可以幫到有需要的小伙伴們～

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52184.html

相關(guān)文章

  • 關(guān)于在一段文本上加修飾劃線的效果

    摘要：最近遇到一個(gè)需求，要在一段文字上面加上一條背景色。類似于上學(xué)時(shí)候用的記號(hào)筆做筆記一樣的效果。第二種和第一種類似還是依靠漸變效果，不過(guò)是從左到右的實(shí)現(xiàn)。元素相對(duì)定位，偽類絕對(duì)定位，設(shè)置來(lái)實(shí)現(xiàn)覆蓋住文字的效果。 最近遇到一個(gè)需求，要在一段文字上面加上一條背景色。類似于上學(xué)時(shí)候用的記號(hào)筆做筆記一樣的效果。第一映像想到的可能是text-decoration: line-through；不過(guò)這里...

    mzlogin 評(píng)論0 收藏0

  • HTML基礎(chǔ)總結(jié)

    摘要：細(xì)化知識(shí)點(diǎn)總結(jié)標(biāo)簽都是標(biāo)題標(biāo)簽，定義一段話的標(biāo)題，最大，依次遞減，最小標(biāo)題標(biāo)簽的作用讓文本加粗顯示段落標(biāo)簽標(biāo)簽用來(lái)顯示一段文本圖片，它會(huì)忽略源代碼中的排版塊元素獨(dú)占一行的元素，和相鄰的元素不能共享同一行所有的塊元素都有屬性和元素都是HTML細(xì)化知識(shí)點(diǎn)總結(jié) 1.h1-h6標(biāo)簽 都是標(biāo)題標(biāo)簽，定義一段話的標(biāo)題，h1最大，依次遞減，h6最小 標(biāo)題標(biāo)簽的作用：讓文本加粗顯示 ? 2. 段落標(biāo)簽：p...

    Jacendfeng 評(píng)論0 收藏0

  • Web前端開(kāi)發(fā)規(guī)范手冊(cè)

    摘要：規(guī)范目的為提高團(tuán)隊(duì)協(xié)作效率便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)輸出高質(zhì)量的文檔特制訂此文檔。 規(guī)范目的 為提高團(tuán)隊(duì)協(xié)作效率, 便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔。 文件規(guī)范 文件命名規(guī)則 文件名稱統(tǒng)一用小寫(xiě)的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)...

    wua_wua2012 評(píng)論0 收藏0

  • Web前端開(kāi)發(fā)規(guī)范手冊(cè)

    摘要：規(guī)范目的為提高團(tuán)隊(duì)協(xié)作效率便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)輸出高質(zhì)量的文檔特制訂此文檔。 規(guī)范目的 為提高團(tuán)隊(duì)協(xié)作效率, 便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔。 文件規(guī)范 文件命名規(guī)則 文件名稱統(tǒng)一用小寫(xiě)的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)...

    Tamic 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<