html媒体查询怎么把颜色换成图片,为网页中图片src添加媒体查询功能。
为图片src 增加媒体查询。
Css 中的媒体查询默认是没有为图片指定src,的 但是如果页面中需要根据浏览器宽度指定图片src, 比如当电脑的时候,加载大图,手机的时候加载小图。
今天发现一个很棒的方法,相当于通过js可以扩展浏览器的媒体查询,
Picturefill
body { font-family: sans-serif }
img { max-width: 100% }
Picturefill: A <picture> element polyfill
For more info: see project home.
在页面中这样写,然后js这样处理
/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
(function( w ){
// Enable strict mode
"use strict";
w.picturefill = function() {
var ps = w.document.getElementsByTagName( "span" );
// Loop the pictures
for( var i = 0, il = ps.length; i
if( ps[ i ].getAttribute( "data-picture" ) !== null ){
var sources = ps[ i ].getElementsByTagName( "span" ),
matches = [];
// See if which sources match
for( var j = 0, jl = sources.length; j
var media = sources[ j ].getAttribute( "data-media" );
// if there's no media specified, OR w.matchMedia is supported
if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
matches.push( sources[ j ] );
}
}
// Find any existing img element in the picture element
var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
if( matches.length ){
var matchedEl = matches.pop();
if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
picImg = w.document.createElement( "img" );
picImg.alt = ps[ i ].getAttribute( "data-alt" );
}
picImg.src = matchedEl.getAttribute( "data-src" );
matchedEl.appendChild( picImg );
}
else if( picImg ){
picImg.parentNode.removeChild( picImg );
}
}
}
};
// Run on resize and domready (w.load as a fallback)
if( w.addEventListener ){
w.addEventListener( "resize", w.picturefill, false );
w.addEventListener( "DOMContentLoaded", function(){
w.picturefill();
// Run once only
w.removeEventListener( "load", w.picturefill, false );
}, false );
w.addEventListener( "load", w.picturefill, false );
}
else if( w.attachEvent ){
w.attachEvent( "onload", w.picturefill );
}
}( this ));
就行了。
demo url: demo
html媒体查询怎么把颜色换成图片,为网页中图片src添加媒体查询功能。相关推荐
- php图片传入及改名代码,WordPress添加媒体中文名图片上传改名(优化版)
WordPress是国外程序,对中文命名的图片不友好,所以上传后就会出现错误.但是我们有时候保存在桌面或者其他地方的图片就是中文命名,现在要上传到WordPress多媒体中,或者上传到文章中,我们改怎 ...
- 用计算机如何换成音乐,win10电脑中怎么将视频转换成音频mp3格式
近日有win10系统用户想要将视频转换成音频mp3格式,但是却不知道要怎么操作,其实我们可以利用第三方工具就可以实现,本文就给大家带来win10电脑中将视频转换成音频mp3格式的详细操作步骤吧. 具体 ...
- ActiveX控件打包成Cab置于网页中自动下载安装
From: http://www.iteye.com/topic/110834 makeCAB.rar (188.5 KB) [背景] 做过ActiveX控件的朋友都知道,要想把自己做的ActiveX ...
- ActiveX控件打包成Cab置于网页中自动下载安装 (收藏未实践测试)
from http://blog.csdn.net/htqlhy/article/details/7937897?locationNum=12 [背景] 做过ActiveX控件的朋友都 ...
- ActiveX控件打包成Cab置于网页中自动下载安装(转载)
原文出自http://www.iteye.com/topic/110834 [背景] 做过ActiveX控件的朋友都知道,要想把自己做的ActiveX控件功能放在自己的网页上使用,那么用户在客户端就必 ...
- 怎样将蓝底照片换成白底
方法:美图秀秀 + java程序. 原来的照片是这样的: 1. 先用美图秀秀将面积较大的蓝底以及边缘比较光滑的部分先刷成白色,或者抠出来都行. 2. 用java程序将边缘部分的蓝色调替换成白色,代码如 ...
- 小程序生成长图(预览,不限高度)+小程序码+小程序码中间logo换成自定义logo
上条博客已经介绍了如何云调用生成小程序码,链接地址: https://blog.csdn.net/mingjuna2010/article/details/92796711 这条博客我们来介绍小程序中 ...
- 关于最近淘宝商品id换成动态id的解决方式
1. 淘宝的反爬虫机制十分严,而很多时候,没办法高效的拿到数据内容响应终端需求,而依赖爬虫就会造成动不动就出现滑块验证,让人很无解,正好,公司有这样的需求,让我负责解决这个问题,刚开始各种尝试,始终没 ...
- android bitmap 替换指定颜色,Android 实现把bitmap图片的某一部分的颜色改成其他颜色...
把bitmap图片的某一部分的颜色改成其他颜色 private Bitmap ChangeBitmap(Bitmap bitmap){ int bitmap_h; int bitmap_w; int ...
最新文章
- Spring定时任务的配置
- Excel 2010 下拉菜单的制作方法
- 43秒处竟惊现刘强东!印度动作大片《WAR》终极预告曝光
- Python filter 函数 - Python零基础入门教程
- vb的一些搞怪的操作
- vutils.save_image==>将给定的张量保存为图像
- 第一届“百度杯”信息安全攻防总决赛 find the flag WP
- 【第二篇】ASP.NET MVC快速入门之数据注解(MVC5+EF6)
- 干掉Dubbo,换下Spring Cloud,这个架构有点厉害!
- 单片机c语言全解 pdf,单片机c语言程序.pdf
- 字节跳动8年经验,亲身经历教你如何从小白晋升月薪过万的测试工程师
- 自考CISSP信息分享
- 2015中国企业500强名单
- win7系统怎么安装dhcp服务器,笔者研习win7系统安装dhcp服务器的技巧介绍
- 域中文件服务器的设置权限,域中文件服务器共享权限设置.pdf
- JetBrain注册学生免费帐号方法
- 无问东西:你曾是少年
- PEP8 python规范神器和jupyter notebook主题更改--Jupyter Notebook 快速入门
- linux将多个文件打包成一个文件,将多个文件打包成一个shell
- 机械制造工艺及计算机辅助工艺设计,机械制造工艺及计算机辅助工艺设计pdf
热门文章
- 计算机二级python选择题知识点,全国计算机等级考试二级Python练习题库-选择题部分.pdf...
- java hibernate sqlserver自增_怎样在hibernate中实现oracle的主键自增策略?
- 第三轮316工程知识竞赛简讯_【资讯】第五届日本文化知识竞赛决赛
- 宝塔 php curl 配置,【笔记】宝塔面板配置laravel
- oracle备份还原采集,oracle 备份还原
- python中字符移位加密_1.1 移位密码加密解密python实现
- ubuntu18.04的ifconfig输出没有ip地址
- 八十八、Python | 十大排序算法系列(下篇)
- Graphviz使用
- b/s结构中ajax技术浅析,B/S架构WEB程序中AJAX异步传输技术的应用研究