資訊專欄INFORMATION COLUMN
摘要：最近遇到一個需求，要在一段文字上面加上一條背景色。類似于上學時候用的記號筆做筆記一樣的效果。第二種和第一種類似還是依靠漸變效果，不過是從左到右的實現(xiàn)。元素相對定位，偽類絕對定位，設(shè)置來實現(xiàn)覆蓋住文字的效果。
最近遇到一個需求，要在一段文字上面加上一條背景色。類似于上學時候用的記號筆做筆記一樣的效果。
第一映像想到的可能是text-decoration: line-through；不過這里有一個問題，先上圖：
放學啦啦
#s5{
text-decoration: line-through;
}
#s5 span{
font-size: 60px;
}
很明顯因為文字大小不一致，導致line-through的位置會錯位。
再看下圖的解決辦法，這里就沒有改變個別文字的大小了。小伙伴們自己可以動手試一試。
附上代碼：
雯子同學 丸子同學 早上好，老師 早上好， 同學們
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實現(xiàn)從上到下的漸變效果，通過屬性巧妙的達到銳變的效果。
第二種和第一種類似還是依靠漸變效果，不過是從左到右的實現(xiàn)。比起第一種可調(diào)性更大?；痈嘁稽c。
第三種也是一種很不錯，用的比較多的方法。就不過多解釋了。
看到這里各位小伙伴們，有沒有發(fā)現(xiàn)一個問題。哪天設(shè)計過來說，你這線怎么在文字后面，不是說讓你劃掉那段文字嗎？？？這下尷尬了。
在這里我要介紹第四種了哈哈哈
通過:after或者:before。元素相對定位，偽類絕對定位，設(shè)置border來實現(xiàn)覆蓋住文字的效果。
好啦，到這里就算是講完了。寫的有點爛，CSS一直是我的弱項。希望可以幫到有需要的小伙伴們～
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116685.html
摘要：最近遇到一個需求，要在一段文字上面加上一條背景色。類似于上學時候用的記號筆做筆記一樣的效果。第二種和第一種類似還是依靠漸變效果，不過是從左到右的實現(xiàn)。元素相對定位，偽類絕對定位，設(shè)置來實現(xiàn)覆蓋住文字的效果。 最近遇到一個需求，要在一段文字上面加上一條背景色。類似于上學時候用的記號筆做筆記一樣的效果。第一映像想到的可能是text-decoration: line-through；不過這里...
摘要：細化知識點總結(jié)標簽都是標題標簽，定義一段話的標題，最大，依次遞減，最小標題標簽的作用讓文本加粗顯示段落標簽標簽用來顯示一段文本圖片，它會忽略源代碼中的排版塊元素獨占一行的元素，和相鄰的元素不能共享同一行所有的塊元素都有屬性和元素都是HTML細化知識點總結(jié) 1.h1-h6標簽 都是標題標簽，定義一段話的標題，h1最大，依次遞減，h6最小 標題標簽的作用：讓文本加粗顯示 ? 2. 段落標簽：p...
摘要：規(guī)范目的為提高團隊協(xié)作效率便于后臺人員添加功能及前端后期優(yōu)化維護輸出高質(zhì)量的文檔特制訂此文檔。 規(guī)范目的 為提高團隊協(xié)作效率, 便于后臺人員添加功能及前端后期優(yōu)化維護, 輸出高質(zhì)量的文檔, 特制訂此文檔。 文件規(guī)范 文件命名規(guī)則 文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...
摘要：規(guī)范目的為提高團隊協(xié)作效率便于后臺人員添加功能及前端后期優(yōu)化維護輸出高質(zhì)量的文檔特制訂此文檔。 規(guī)范目的 為提高團隊協(xié)作效率, 便于后臺人員添加功能及前端后期優(yōu)化維護, 輸出高質(zhì)量的文檔, 特制訂此文檔。 文件規(guī)范 文件命名規(guī)則 文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...
閱讀 911·2023-04-26 02:16
閱讀 1218·2019-08-30 15:55
閱讀 2797·2019-08-30 15:53
閱讀 3392·2019-08-29 15:38
閱讀 2899·2019-08-29 13:42
閱讀 1989·2019-08-26 13:34
閱讀 1848·2019-08-26 10:10
閱讀 3083·2019-08-23 14:40
