美文网首页
SVG点亮图片

SVG点亮图片

作者: 0清婉0 | 来源:发表于2021-03-19 20:36 被阅读0次

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8" />

<title>点亮图片</title>

<style type="text/css">

section,svg {

display: inline-block;

width: 1080px;

height: 1800px;

}

</style>

</head>

<body style="text-align: center;">

<section style="background-image: url(img/wuhan1.jpg);">

<svg style="background-image: url(img/wuhan2.jpg); opacity: 0;">

<animate attributeName="opacity" from="0" to="1"

begin="click" dur="4s" fill="freeze" restart="never"

data-darkmode-bgimage-15863094715821="1"

data-darkmode-color-15863094715821="rgba(0,0,0,0.9)">

</animate>

</svg>

</section>

</body>

</html>

相关文章

  • SVG点亮图片

    点亮图片 section,svg {display: inline-blo...

  • iOS-加载SVG类型的图片并且实现可点击长按功能

    首先介绍下该项目实现了那些功能 svg图片数据解析 绘制svg图片 svg图片按照区域设置不同颜色绘制图片.png...

  • SVG的使用

    SVG图片 一. SVG介绍 1.1. SVG概念解析 SVG全称: Scalable Vector Graphi...

  • android apk瘦身

    apk打包流程图 1,SVG图片替换PNG图片 使用svg图注意事项: 1 svg图适用于小图标,svg宽高 小于...

  • iOS使用SVG总结

    svg图片的size不管怎么变,都不会失真。所以有时候可以用svg代替png图片。 显示SVG图片 如果只是显示s...

  • SVG use使用

    平时使用svg,都是当成图片来使用,直接用img标签像引入图片一样引入svg。现在认识一下SVG Sprite技术...

  • 无标题文章

    SVG svg和canvas的区别 svg绘制的是矢量图, canvas绘制的是位图 svg使用XML来绘制图片,...

  • AI导出svg图片位置改变

    在AI中导出svg格式时,使用存储为svg,不使用导出为svg(注:导出为svg会使图片出现位置改变等)

  • svg图片无法完全铺满容器

    问题描述:ui所给的svg图片无法填充满容器 解决方案:编辑svg图片,添加属性:preserveAspectRa...

  • Android apk大小优化方案

    1.减少图片的体积 SVG IconFont 使用 svg格式的不能直接使用 需将图片转化成vector的xml文...

网友评论

      本文标题:SVG点亮图片

      本文链接:https://www.haomeiwen.com/subject/ubybcltx.html