css中url后面怎么加 |css沉冗是什么意思

1. 相对路径

url("images/pic.png");  /*相对于CSS文件目录下的images文件夹*/
url("../images/pic.png"); /*相对于CSS文件所在目录的上一级目录下的images文件夹*/
url("/images/pic.png"); /*相对于站点根目录的images文件夹*/

2. 绝对路径

url("https://www.example.com/images/pic.png"); /* 绝对路径 */

3. data URIs

url("data:image/png;base64,iVBORw0KG..."); /* data URIs */

4. 引用字体

/* 引用外部字体 */
@font-face {
font-family: 'MyFont';
src: url('https://www.example.com/fonts/MyFont.ttf') format('truetype');
}
body{
font-family:'MyFont', Arial, serif; /* 使用自定义字体 */
}

5. 引用SVG图像

background-image: url('image.svg#my-icon'); /* 引用SVG图像 */
/* 
如果SVG图像被精简了，可以在URL后面加上“#”以引用单独的图形。
例如，如果SVG图像包含一组具有ID“foo”的矩形元素，
background-image: url('image.svg#foo'); 
*/

总结

在CSS中，URL可以用于引用外部文件、指向页面元素、引用字体、引用SVG图像等等。在URL后面可以加上相对路径、绝对路径、data URIs等等。加深对这些用法的理解，可以帮助大家更好地使用CSS。