SVG图片背景透明
今天在调整网页的时候,将logo以原有直接贴代码形式,改为加载文件。
其实真正的目的是做SEO。上次SEO交流后得出 结论:核心在于内容的本身的优化。信噪比很重要。也就是有效信息需要占文章的主要内容,相关信息太多会降低权重,关键词优化作用有限,太多关键词的堆砌反倒会降低权重。然后LD认为这个会影响SEO,遂去掉。
当时使用这种并不友好的方法,是因为采用原有方式加载SVG文件不显示,然后才将SVG文件进行压缩后直接贴代码的形式。
后来修改css,在加上SVG后能够显示,但是SVG背景一直是白色的,这很尴尬。
代码如下:
<a class="logo" href="/">
<span class="svg">
<svg class="icon icon-masala" style="position: absolute; width: 0; height: 0;" width="" height="" version="1.1">
<img src="img/logo.svg"/>
</svg>
</span>
</a>
效果如下:
既然SVG图片显示了,那么现在需要去除背景。通过搜索,在w3c上发现了解决办法,使用embed标签
http://www.w3school.com.cn/svg/svg_inhtml.asp
如果直接拷贝w3c的代码会发现,其实是有问题的,这里的属性是有宽高的,[可以根据自己的需求设置大小] ,pluginspage 这个属性我没有用到直接删除了。
<embed src="rect.svg" width="" height=""
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
代码如下:
<embed src="img/logo.svg" type="image/svg+xml"/> //我去除了宽高属性,为了让SVG图片自动适应页面大小。
效果:
PC端:
移动端:
SVG图片背景透明的更多相关文章
- 用shader使图片背景透明
转自:http://blog.csdn.net/dawn_moon/article/details/8631783 好吧,终于抽时间写这篇文章了. 手头上有很多人物行走图,技能特效图等,但这些图都有个 ...
- 【转】cocos2d-x游戏开发(十四)用shader使图片背景透明
转自:http://blog.csdn.net/dawn_moon/article/details/8631783 好吧,终于抽时间写这篇文章了. 手头上有很多人物行走图,技能特效图等,但这些图都有个 ...
- cocos2d-x—使用shader使图片背景透明
这里用shader处理了像素,使黑色背景透明,直接上代码 ShaderSprite.h [cpp] view plaincopyprint? #ifndef __TestShader__ShaderS ...
- ps让图片背景透明
效果图: jpg=>png,背景透明 步骤: 1.选择橡皮工具的第三个 魔术橡皮 保存为png, 按住Ctrl+alt+shift+s 保存:
- Android 设置按钮背景透明与半透明_图片背景透明
Button或者ImageButton的背景设为透明或者半透明 半透明<Button android:background="#e0000000" ... /> 透明 ...
- jquery 图片背景透明度(支持IE5/IE6/IE7)
设置背景图片,以突出透明度的效果及jquery png背景透明插件实例教程 <head> <title>toggle()</title> <style typ ...
- ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法
IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是 ...
- C# 实现PNG文件的背景透明显示,解决动态显示闪烁问题 【转】
http://blog.sina.com.cn/s/blog_402c071e0102x4rl.html 以下内容,对于想要使用C#实现PNG图片背景透明显示,同时动态显示时无闪烁问题的人来说, ...
- ie6下:png图片不透明 和 背景图片为png的节点的内部标签单击事件不响应
1.png图片不透明 少量图片时:使用滤镜: _background:none; _filter:prodig:DXImageTransform.Microsoft.AlphaImageLoader( ...
随机推荐
- SQL 语句执行后同步返回结果条数
PgSQL SELECT COUNT(*) OVER() AS res_count FROM table WHERE ... MySQL mysql> SELECT SQL_CALC_FOUND ...
- 爬虫:Scrapy1
Python 2.7 npm install scrapy 步骤: 创建一个 Scrapy 项目 定义提取的 Item 编写爬取网站的 Spider 并提取 Item 编写 Item Pipeline ...
- 编译php 转
LAOGAO added 20140907: configure: error: mcrypt.h not found. Please reinstall libmcrypt.复制代码 代码如下:wg ...
- 【bzoj2242】[SDOI2011]计算器 EXgcd+BSGS
题目描述 你被要求设计一个计算器完成以下三项任务: 1.给定y,z,p,计算Y^Z Mod P 的值: 2.给定y,z,p,计算满足xy≡ Z ( mod P )的最小非负整数: 3.给定y,z,p, ...
- C# 泛型的入门理解(来自网络)
using System.Collections; class Program { //做个比较 static void Main(string[] args) { //new对象 Cls a1 = ...
- C#添加编译时间
using System.Reflection;using UnityEngine;using System.Collections; [assembly:AssemblyVersion( " ...
- 个人环境搭建——搭建JDK环境
搭建JDK环境 开始之初先提醒两点: ①java是在bash环境下面的,虽然我也在.cshrc下面添加了环境变量,好像有点问题,需要继续改进: ②查看linux版本信息命令:cat /etc/issu ...
- Gym 100989E 字符串
Description standard input/output Islam is usually in a hurry. He often types his passwords incorrec ...
- 【小技巧】树剖套线段树优化建图如何做到 O(nlogn)
前提:用树剖套线段树优化树链连边.例题:bzoj4699 我们说树剖的时间复杂度是 $O(n\times log(n))$,是因为访问一条链时需要经过 $log(n)$ 级别条重链,对于每条重链还需要 ...
- 移动端页面a input去除点击效果及pc端切换
1 手机端页面a button input去除点击效果以及闪屏问题 添加: a, button, input { -webkit-tap-highlight-color: rgba(255, 0, 0 ...