精华内容
下载资源
问答
  • 本篇文章给大家带来的内容是关于在CSS背景图片中使用svg的用法介绍...可以非常轻松的根据设备的尺寸来控制图片的尺寸,还有一个好处就是可以不用把SVG图片插入到html中,从而保持html的整洁。在CSS背景图片中使用S...

    5268f80b9b1e01f982625ef6fac83ca1.png

    本篇文章给大家带来的内容是关于在CSS背景图片中使用svg的用法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    在CSS背景图片中使用SVG,可以使用css background属性的诸多特性,比如图片尺寸和图片位置等等。可以非常轻松的根据设备的尺寸来控制图片的尺寸,还有一个好处就是可以不用把SVG图片插入到html中,从而保持html的整洁。

    在CSS背景图片中使用SVG,有很多的优点,对提高性能也是有很大帮助的。那在CSS背景图片中使用SVG,有什么方法来改变它的颜色呢?接着看。

    CSS mask

    使用CSS中mask来改变背景颜色,这个方法简单实用,重要的是现在浏览器对它的支持越来越好。mask属性可以用来根据元素的轮廓来创建一个遮罩,使用遮罩可以只显示指定图片内容的区域,而图片区域以外的则是隐藏的。下面是它的使用方法:.icon {

    background-color: red;

    -webkit-mask-image: url(icon.svg);

    mask-image: url(icon.svg);

    }

    mask还有很多的属性,比如mask-position、mask-repeat和mask-size,它们跟CSS中背景图片的对应属性的使用方法都差不多,也可以像background一样来使用简写语法:.icon {

    background-color: red;

    -webkit-mask: url(icon.svg) no-repeat 50% 50%;

    mask: url(icon.svg) no-repeat 50% 50%;

    }

    浏览器对mask的支持也越来越好。可以通过下面的地址来看看各个浏览器对它的支持情况:

    https://caniuse.com/#search=mask-image

    另外如果不限于在css中修改的话,可以直接修改svg源文件

    把svg图片拖到编辑器里可以看到svg源代码<?xml version="1.0" standalone="no"?>

    540202401705" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10044" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">

    直接找到里面的 fill属性修改里面的色值就行了

    展开全文
  • 本篇文章给大家带来的内容是关于在CSS背景图片中使用svg的用法介绍...可以非常轻松的根据设备的尺寸来控制图片的尺寸,还有一个好处就是可以不用把SVG图片插入到html中,从而保持html的整洁。在CSS背景图片中使用S...

    本篇文章给大家带来的内容是关于在CSS背景图片中使用svg的用法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    在CSS背景图片中使用SVG,可以使用css background属性的诸多特性,比如图片尺寸和图片位置等等。可以非常轻松的根据设备的尺寸来控制图片的尺寸,还有一个好处就是可以不用把SVG图片插入到html中,从而保持html的整洁。

    在CSS背景图片中使用SVG,有很多的优点,对提高性能也是有很大帮助的。那在CSS背景图片中使用SVG,有什么方法来改变它的颜色呢?接着看。

    CSS mask

    使用CSS中mask来改变背景颜色,这个方法简单实用,重要的是现在浏览器对它的支持越来越好。mask属性可以用来根据元素的轮廓来创建一个遮罩,使用遮罩可以只显示指定图片内容的区域,而图片区域以外的则是隐藏的。下面是它的使用方法:.icon {

    background-color: red;

    -webkit-mask-image: url(icon.svg);

    mask-image: url(icon.svg);

    }

    mask还有很多的属性,比如mask-position、mask-repeat和mask-size,它们跟CSS中背景图片的对应属性的使用方法都差不多,也可以像background一样来使用简写语法:.icon {

    background-color: red;

    -webkit-mask: url(icon.svg) no-repeat 50% 50%;

    mask: url(icon.svg) no-repeat 50% 50%;

    }

    浏览器对mask的支持也越来越好。可以通过下面的地址来看看各个浏览器对它的支持情况:

    https://caniuse.com/#search=mask-image

    另外如果不限于在css中修改的话,可以直接修改svg源文件

    把svg图片拖到编辑器里可以看到svg源代码<?xml version="1.0" standalone="no"?>

    540202401705" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10044" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">

    直接找到里面的 fill属性修改里面的色值就行了

    展开全文
  • 前端:background-image引入svg图片背景浅析概述掌握的知识background-image相关属性svg相关属性核心 概述 background-image引入图片,之前给笔者印象是利用background-size属性、background-repeat属性可以控制...

    前端:background-image引入svg图片背景浅析

    概述

    background-image引入图片,之前给笔者印象是利用background-size属性、background-repeat属性可以控制图片的缩放,拉伸从而实现背景图片的自适应。但是当遇到background-image遇到svg时,发现了不一样的结果。主要原因是 — SVG可以设置比例(viewBox、preserveAspectRatio)造成。

    掌握的知识

    background-image相关属性

    • background-image
      通过url加载图片资源,比如说svg、png等等
    • background-size
      控制加载资源的大小,这个属性可以覆盖svg的宽高

    svg相关属性

    • viewBox
      视图坐标系(个人定义,因为既有坐标系的功能,又定义了绘制图片的范围),在此坐标系内绘制各种图形。
    • preserveAspectRatio
      统一缩放比例,该属性用于当视窗(viewport)与视图坐标系(viewBox)比例不一致时,该如何缩放摆放

    核心

    因为通过使用background-size的属性,控制viewport,通过viewBox控制视窗的大小,由于preserverAspectRatio的默认属性不是none。所以无法拉伸,只能调节viewBox的位置来布局。

    展开全文
  • CSS3 背景图 插入 SVG图片 base64

    千次阅读 2019-11-11 16:03:27
    css3 data:url()可以使用base64编码图片直接放在网页上 base64其实是图片的内容。主要目的是减少浏览器和服务器之间的连接数。提高服务器的并发能力! 至于 “data”这个冷门的类型 是在 RFC2397(1998)) 提出的...
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #thirdpart-login .thirdpart-login-icon {
                background-size: contain;
                background-position: 0 0;
                width: 26px;
                height: 26px;
                display: inline-block;
                background-repeat: no-repeat;
                margin-right: 10px;
            }
    
            .icon-alipay {
                background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlLz48L2RlZnM+PHBhdGggZD0iTTIyNi45NjUgNjI5LjEyYzAgMzUuMjcyIDIxLjUwMyA4NC4yODUgMTIzLjgzNSA4NC4yODUgMTAyLjMyMyAwIDE4OS4xNzUtMTAzLjE2OCAxODkuMTc1LTEwMy4xNjhzLTExNy41Ni02NS43MTUtMjA0LjY1NS02MC4yMjNjLTg3LjExIDUuNTctMTA4LjM1NSA0My44NC0xMDguMzU1IDc5LjEwNXoiIGZpbGw9IiMxMjk2ZGIiLz48cGF0aCBkPSJNNTEyLjAxNS4wM0MyMjkuMjYyLjAzLjAyIDIyOS4yNTIuMDIgNTEyLjAwNmMwIDI4Mi43NCAyMjkuMjQyIDUxMS45NjMgNTExLjk5NSA1MTEuOTYzIDI4Mi43MjcgMCA1MTEuOTY0LTIyOS4yMjQgNTExLjk2NC01MTEuOTYzQzEwMjMuOTggMjI5LjI1MyA3OTQuNzQuMDMgNTEyLjAxNC4wM3pNODk4LjE2NyA3ODEuN0w2MDguMTk1IDY0NC4yMlM1NTMuMzUgNzA0LjkgNDk3LjQxOCA3MzEuNTc4Yy01NS45MzUgMjYuNjg3LTEyMC4xOSA0My4zMjctMTg5LjY5IDI2Ljg4LTY5LjU2NS0xNi4zOC0xMTguOTA3LTYwLjg1Ni0xMTAuMzk2LTE0Mi45NyA4LjUxMi04Mi4xMDUgOTYuMjU1LTExMC4zOTMgMTY4LjQ0My0xMTAuMzkzIDcyLjE4IDAgMjA5LjIwNSA0Ni43NyAyMDkuMjA1IDQ2Ljc3czExLjUxMi0yNS43OCAyMi43MTgtNTUuMjc4YzExLjItMjkuNSAxNC40MDItNTMuMTg1IDE0LjQwMi01My4xODVIMzIwLjQwNnYtMjkuMzE4aDE0MS43NHYtNTUuOTM1bC0xNzYuNjk1IDEuMjlWMzIyLjU3aDE3Ni41MTN2LTgzLjg5NGg5Mi43OXY4My44OTVINzQ0LjEydjM2Ljg2NmwtMTg5LjM2NyAxLjI3M3Y1Mi4wOWwxNTYuNDA3IDEuMjgycy0yLjgxIDI5LjI1Ni0yMi42NDggODIuNDQyYy0xOS44NDMgNTMuMTg1LTM4LjM5NiA4MC4zMTctMzguMzk2IDgwLjMxN2wzMDMuNDEgOTkuNTc1cy0xMC44OCAyOC40ODItMjQgNTMuNDM1Yy0xMy4xMTcgMjQuOTUyLTMxLjM2IDUxLjg1LTMxLjM2IDUxLjg1eiIgZmlsbD0iIzEyOTZkYiIvPjwvc3ZnPg==);
            }
        </style>
    </head>
    
    <body>
        <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
            <defs>
                < style />
            </defs>
            <path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="#E62425" />
            <path d="M609.472 505.28c59.072 15.36 78.08 48.192 76.736 78.08-4.288 98.368-112.896 166.464-252.224 182.656C315.392 779.776 194.688 721.792 192 603.2c-2.176-96.64 133.696-279.808 249.28-262.208 48.64 7.424 24.576 87.872 26.304 90.496 2.944 4.544 90.112-50.048 130.688-22.4 42.496 28.992.128 93.312 11.2 96.192zm-18.816 106.752c5.696-66.432-67.84-120.32-164.352-120.32S247.04 545.6 241.344 612.032c-5.696 66.496 67.84 120.384 164.288 120.384s179.264-53.952 185.024-120.384zM408 539.968c51.712 0 91.712 37.376 89.472 83.456-2.304 46.08-46.016 83.456-97.728 83.456-51.712 0-91.712-37.376-89.472-83.456 2.304-46.08 46.08-83.456 97.728-83.456zm-31.68 130.88a29.568 29.568 0 0 0 29.312-29.888 29.568 29.568 0 0 0-29.312-29.888 29.568 29.568 0 0 0-29.312 29.888c0 16.512 13.12 29.888 29.312 29.888zM612.096 256C698.048 256 768 327.232 768 414.784a167.424 167.424 0 0 1-7.68 49.472 19.52 19.52 0 0 1-24.448 12.672 19.84 19.84 0 0 1-12.416-24.96 120.832 120.832 0 0 0 5.76-37.184c0-65.728-52.544-119.232-117.056-119.232a113.92 113.92 0 0 0-19.264 1.6 19.456 19.456 0 0 1-22.336-16.32 19.712 19.712 0 0 1 15.936-22.72 155.836 155.836 0 0 1 25.6-2.112zm-1.088 77.568a82.56 82.56 0 0 1 81.664 83.136 85.44 85.44 0 0 1-4.032 25.856 19.52 19.52 0 0 1-24.448 12.672 19.84 19.84 0 0 1-12.416-24.96 43.968 43.968 0 0 0 2.112-13.632 43.264 43.264 0 0 0-49.856-43.072 19.328 19.328 0 0 1-22.4-16.192 19.776 19.776 0 0 1 16-22.72 85.12 85.12 0 0 1 13.376-1.088z" fill="#FFF" />
        </svg>
    
        <a href="alipay.svg">支付宝</a>
    
        <embed src="alipay.svg" type="image/svg+xml" />
    
        <object data="alipay.svg" type="image/svg+xml"></object>
        <div id="thirdpart-login">
            <div class="thirdpart-login-icon icon-alipay">
    
            </div>
    
        </div>
    
    
        <?php
    
        $a = '<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M226.965 629.12c0 35.272 21.503 84.285 123.835 84.285 102.323 0 189.175-103.168 189.175-103.168s-117.56-65.715-204.655-60.223c-87.11 5.57-108.355 43.84-108.355 79.105z" fill="#1296db"/><path d="M512.015.03C229.262.03.02 229.252.02 512.006c0 282.74 229.242 511.963 511.995 511.963 282.727 0 511.964-229.224 511.964-511.963C1023.98 229.253 794.74.03 512.014.03zM898.167 781.7L608.195 644.22S553.35 704.9 497.418 731.578c-55.935 26.687-120.19 43.327-189.69 26.88-69.565-16.38-118.907-60.856-110.396-142.97 8.512-82.105 96.255-110.393 168.443-110.393 72.18 0 209.205 46.77 209.205 46.77s11.512-25.78 22.718-55.278c11.2-29.5 14.402-53.185 14.402-53.185H320.406v-29.318h141.74v-55.935l-176.695 1.29V322.57h176.513v-83.894h92.79v83.895H744.12v36.866l-189.367 1.273v52.09l156.407 1.282s-2.81 29.256-22.648 82.442c-19.843 53.185-38.396 80.317-38.396 80.317l303.41 99.575s-10.88 28.482-24 53.435c-13.117 24.952-31.36 51.85-31.36 51.85z" fill="#1296db"/></svg>';
    
        $a = base64_encode($a);
    
        print_r($a);
    
        ?>
    
    
    </body>
    
    </html>

    css3 data:url()可以使用base64编码图片直接放在网页上

    base64其实是图片的内容。主要目的是减少浏览器和服务器之间的连接数。提高服务器的并发能力!
    至于 “data”这个冷门的类型
    是在RFC2397(1998))提出的
    目的是为了在图片尺寸很小的时候,省力点,免得引用url浪费资源
    虽然也是个老套的东西但莫名有用啊
    展开全文
  • CSS添加SVG背景或伪类内容

    千次阅读 2018-08-09 14:57:12
    CSS背景 1.首先用编辑器打开需要用到的svg文件,复制源代码 2.打开在线URL编码工具... ... 4.复制编码结果,粘贴到CSS背景设置里(示例的svg为一个loading图标) background-image: url(‘data:i...
  • css3 svg 背景图 data:image/svg+xml;base64

    万次阅读 2015-04-17 15:08:51
    css3 svg 背景图 data:image/svg+xml;base64 background: #fff url(data:image/svg+xml;base64
  • css文件里引入图片 webpack配置如下: 'use strict'; const fs = require('fs'); const path = require('path'); const webpack = require('webpack'); // const resolve = require('resolve'); const ...
  • css svg使用 An SVG can be embedded on a web page in many ways; one of which is embedding it inline in an HTML5 page using the <svg> tag. The other commonly used techniques include embe....
  • CSS拼贴相比,SVG模式提供了一种在网页上重复背景图像的更加灵活的方法。 让我们看看为什么会这样,以及如何使用它们。 您将学到什么 本教程有视频和文本两种形式,以下是您将学到的内容的细分: 我们将从...
  • angular4中引入svg

    千次阅读 2017-09-19 10:23:19
    html引入即可 &lt;div&gt; &lt;img src="yourIcon.svg"&gt; &lt;/div&gt; 注意: 根位置是index.html文件所在的位置 动态更改svg 可以使用ngStyle指令 &lt;...
  • 项目引入sass,然后,尼玛,图片死活不显示……然后看下,尼玛,路径404,什么鬼?然后,编辑中级编辑css,是好的啊……这么到webpack里面,就不认图片路径了呢?//require('normalize.css/normalize.css');require...
  • 微信小程序里引入SVG矢量图标

    万次阅读 2018-08-04 11:00:41
    因为微信小程序的限制,引入外部图片或者矢量图,只能通过设置背景图片background-image : url(&quot;base64转码后的代码&quot;);的方式来进行操作。同时还是因为微信小程序的限制,我们要先把svg的xml编码...
  • 本文章采用postcss-write-svg与border-image这个css3属性进行1px细线的绘制(仅适合直线,圆角建议用transform于伪类实现),其他的像border-shadow、transform与伪类的实现方式在这里就不说了,网上也搜得到。...
  • 本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!...2.React多页面应用2(处理CSS图片,引入postCSS图片处理等)----2017.12.29 3.React多页面应用
  • SVG全称是Scalable Vector Graphics,如果你使用过adobe Illustrator的话,相信你对这种适量格式的图片并不陌生! 为什么使用SVG? 文件非常小 能够无损失的缩放尺寸 在Retina显示屏上效果超棒 ...
  • 参考:... 在css引入背景图片 background-image: url("../assets/image/mobile/bg.png"); background-size: cover; 抱错 This relative module was not found: *...
  • 1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.042、React多页面应用2(webpack4 处理CSS图片,引入postCSS,及图片处理等)---2018.04.083、React多页面应用3(webpack4 多页面实现)---...
  • 引入css 路径The web is predominantly rectangular. On the other hand, print media tends to be more varied in shape. Among the many reasons for this difference is a lack of appropriate tools to achieve ...
  • 但是我现在的元素是在svg中,即图片引入是通过image元素xlink:href来引入图片的,所以上述方法不知道怎么用来着。能给点建议不。在SVG引入图片除了image元素还有其他类似html中的background的方法设置...
  • 在用作背景图像时修改SVG填充颜色将SVG输出直接放在页面代码中,我可以简单地用CSS修改填充颜色,如下所示:polygon.mystar{fill:blue;}circle.mycircle{fill:green;}这很好用,但是当SVG作为背景图像时,我正在寻找...
  • CSS背景效果

    2019-09-04 22:26:52
    前面的话 本文将详细介绍CSS背景效果 条纹背景 【双条纹背景】 background:linear-gradient(#fb3 50%, #58a 50%); background-size...
  • 这是一款效果非常炫酷的HTML5 SVGCSS3蹦床式图片切换特效插件。该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意。另外,所有图片都以栈的方式堆...
  • 当时就想这个改怎么做呢,经过一番考虑我决定用SVG图,但是TB里边不能直接用,所有就像是不是可以一个DIV 指定一个背景背景就用SVG转base64的数据来做。 1、首先去阿里那边搞一个SVG 过来: ...
  • 但是我现在的元素是在svg中,即图片引入是通过image元素xlink:href来引入图片的,所以上述方法不知道怎么用来着。能给点建议不。在SVG引入图片除了image元素还有其他类似html中的background的方法设置...
  • 您可以尝试使用base64编码数据uris svg背景图像.这就是它在CSS中的样子:input {border-color: #ff2222;background-color: #ff8888;background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3...
  • 通过css改变svg img的颜色

    千次阅读 2019-01-08 20:20:00
    需求如下图,hover的时候改变图标颜色,图标为引入svg img 一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景? 但是为了更小的开销,一般css为更...
  • svg动效背景

    2021-07-21 11:00:21
    2、将svg文件引入背景中去 .dom{ background-image: url('mysvg.svg') } 之后背景就动起来了 进阶玩法: dom的子元素添加混合模式和背景后,当前元素和子元素可实现文字渐变动画 .dom-
  • 使用SVG做网页背景

    千次阅读 2018-08-08 22:17:14
    使用重复的SVG图案(SVG Patterns)作为网页的背景,与传统的CSS相比有很多优点。本文介绍SVG制作网页背景的优势,并简要概括方法、相关资源和浏览器支持情况。 SVG上手教程: SVG上手 Viewport and viewBox 1. ...
  • 这是一款效果非常炫酷的HTML5 SVGCSS3蹦床式图片切换特效插件。该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意。另外,所有图片都以栈的方式堆...
  • CSS实现一张背景图片的无缝自动向上滚动首先了解一下 CSS3 @keyframes 规则htmlcss引入 首先了解一下 CSS3 @keyframes 规则 不了解 css3 动画的请点击下方 参考文档: @keyframes. animation . 使用background-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,923
精华内容 1,969
关键字:

css背景图片引入svg