SVG背景圖筆記


url引用格式:url('data:image/svg+xml;base64')

實例:

准備好SVG文件

源碼:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body{
/*base64代碼--直接復制SVG文件里的所有代碼*/ background: rgb(255,255,255) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100' preserveAspectRatio='none'><defs><radialGradient id='rg1' cx='0%' cy='0%' r='100%' fx='0%' fy='0%'><stop offset='0%' style='stop-color: #a480ff; stop-opacity: 0.5' /><stop offset='100%' style='stop-color: #a480ff; stop-opacity:0' /></radialGradient><radialGradient id='rg2' cx='100%' cy='0%' r='100%' fx='100%' fy='0%'><stop offset='0%' style='stop-color: #ff8f83; stop-opacity: 0.5' /><stop offset='100%' style='stop-color: #ff8f83; stop-opacity:0' /></radialGradient></defs><polygon points='0,0 125,0 125,100 0,100' style='fill: url(#rg1);' /><polygon points='75,0 200,0 200,100 75,100' style='fill: url(#rg2);' /></svg>") no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; } </style> <body> </body> </html>

效果:

SVG參考手冊http://www.runoob.com/svg/svg-reference.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM