2、首先，我们应该先给div设置宽度和高度，保证文字有一个范围。
3、然后通过background给div添加一张图片作为它的背景。
4、通过url()来连接图片，url里面放置的就是背景图片的路径。
5、放一张图片用作背景，注意，路径要写对。
6、保存之后文字就会覆盖在图片的上面了，而如果使用img标签，则没有这种效果。
其实是个ICO图标。要预先制作一个图标文件，大小为16*16像素。文件扩展名�¸.icoï¼ç¶åä¸ä¼ å°ç¸åºç®å½ä¸ãå¨æºæ件â<head></head>âä¹é´æ·»å å¦ä¸ä»£ç ï¼<Link Rel=\"ICON NAME\" href=\"http://å¾ççå°åï¼æ³¨æä¸åæçç®å½å¯¹åºï¼\">æ¶èå¤¹ï¼ favicon.ico ä½ é便ç¨ä¸ç§ç»è±¡ç´ çå·¥å ·ï¼ç»ä¸ä¸ªå¾æ ï¼ç¶åèµ·æè¿ä¸ªååï¼ä¸ä¼ å°ä½ ææç½é¡µæ件çé£ä¸ªæ件夹éå°±è¡äºãä¸è¬é½ä¼èªå¨æ¾è¿ä¸ªfavicon.icoçæ件ï¼åªè¦æï¼å°±ä¼æ¾ç¤ºã 并ä¸æ¯æ ¹ç®å½ä¸ å°åæ çæ¹æ³ï¼ åªæ¯å¨ç½é¡µä¸å¤å å ¥ä¸é¢ä¸æ¡ä»£ç å°±è¡äºã <link rel=âshortcut iconâ href=âsample.pngâ type=âimage/x-iconâ />å¦ææ头没æåéçå·¥å ·å¶ä½å¾çï¼ä¹å¯ä»¥éæ©ä¸ä¸ªèªå·±å欢çå¾çï¼ç¶åå°è¿ä¸ªç½ç«å»èªå¨çæä¸ä¸ªãFaviconï¼å³Favorites Iconç缩åï¼é¡¾åæä¹ï¼ä¾¿æ¯å ¶å¯ä»¥è®©æµè§å¨çæ¶è夹ä¸é¤æ¾ç¤ºç¸åºçæ é¢å¤ï¼è¿ä»¥å¾æ çæ¹å¼åºå«ä¸åçç½ç«背景图上加个div层然后参考下这个吧
.toLeft {
background-image:-webkit-linear-gradient(
to left,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%)
background-image:linear-gradient(
to left,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%)
}
.toRight {
background-image:-webkit-linear-gradient(
to right,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%)
background-image: linear-gradient(
to right,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%)
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）