CSS如何使用url()函数？用法代码示例

2021年3月29日18:00:50 发表评论 903 次浏览

url()函数是一个内置函数, 用于包含文件。该函数的参数是绝对URL, 相对URL或数据URI。 url()函数可用于背景图像, 边框图像, 列表样式图像, 内容, 光标, 边框图像, 边框图像源, 作为@ font-face块一部分的src和@反样式/符号。

语法如下：

url( <string> <url-modifier>* )

参数：该函数接受单个参数网址以字符串格式保存网址。 url的示例是：

<css_property>: url("https://lsbin.org/image.png")
<css_property>: url('https://lsbin.org/image.png')
<css_property>: url(https://lsbin.org/image.png)

以下示例说明了CSS中的url()函数：

例子：

<!DOCTYPE html> 
< html > 
  
< head > 
     < title >CSS url() function</ title > 
  
     < style >
         body {
             background-image: url(
"https://media.lsbin.org/wp-content/cdn-uploads/20190710102234/download3.png");
             text-align:center;
         }
         h1 {
             color:white;
         }
     </ style > 
</ head > 
  
< body > 
     < h1 >lsbin</ h1 >
     < h2 >CSS url() function</ h2 >
</ body > 
  
</ html >

输出如下：