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

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

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 >

输出如下:

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

支持的浏览器:url()函数支持的浏览器如下所示:

  • 谷歌浏览器
  • IE浏览器
  • 火狐浏览器
  • 苹果浏览器
  • 歌剧

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: