• IMG标签本身是显示图片的，但通过CSS可以再为其设置背景图片，让其和自身的图片配合来显示，最终的效果会让你惊叹。当然，这个发现来自于老外，所以代码马上与大家分享。再此之前，我也从来没有想到过这个思路，我想这种思路可以应用的地方相当多了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>CSS奇特用法：为IMG设置背景图片</title>

<style type="text/css">

div {

background: url('http://www.codefans.net//jscss/demoimg/201312/blur.jpg') no-repeat top left;

width:232px;height: 200px; }

img {display:block;background: url('http://www.codefans.net//jscss/demoimg/201312/parallax.gif') no-repeat bottom left;

padding: 93px 100px 75px 100px;

}

</style>

</head>

<body>

<div>

<img src="http://www.codefans.net//jscss/demoimg/201312/Anime_runner.gif" alt="runner" />

</div>

</body>

</html>

----转载

css奇特用法之 IMG添加背景图片配合显示--效果惊艳的更多相关文章

  1. extjs中新建窗体时，给窗体添加背景图片不显示问题之一

    1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了  layout: 'fit', Ext.create('Ext.Window', { title: ...

  2. 自定义编辑框VC,可加载更改字体，添加背景图片，显示输入提示信息

    搞了一天终于弄了个完整的编辑框控件出来了, 哎,,,搞界面开发还是有点复杂的. #pragma once #include "AdvEdit.h" // CBkgEditBox c ...

  3. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  4. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  5. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  6. Java怎么添加背景图片

    首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; im ...

  7. 如何在使用itext生成pdf文档时给文档添加背景图片

    这个问题我在网上搜了很久,没有找到什么解决方案,需求其实很简单,就是添加背景图片.在解决这个问题之前,我们需要了解什么是背景图片?背景图片就是位于文档最底层的图片,文字和其他内容可以浮在它的上面.这又 ...

  8. C#(winform)为button添加背景图片

    1.既然是添加背景图片 所以这里应该使用 Button.BackgroudImage = "" ;来设置图片 而不应该使用  Button.Image = "" ...

  9. iOS 中 为UIView添加背景图片

    创建UIImage的方法有两种: UIImage *image = [UIImageimageNamed:@"image.jpg"];//这种不释放内存,要缓存 NSString ...

随机推荐

  1. cocos2dx中加入unzip

    作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4037323.html  cocos2dx中没有直接解压文件的,自己网上找了个,记录一下. ...

  2. 单步运行linux kernel ?

    如果能给linux kernel打log,如果能单步运行,如果能像普通应用程序那样,step by step的查看程序跑哪里了.. 该多好?这是一个梦想,但从未实现过:因为那是kernel,不是应用程 ...

  3. ARM Compiler toolchain Compiler -- Supported ARM architectures

    --cpu=name This option enables code generation for the selected ARM processor or architecture. Synta ...

  4. jQuery关于文字内容溢出用点点点(…)省略号表示

    1.jQuery限制字符字数的方法代码很简单,使用也很方便,如下: $(document).ready(function(){//限制字符个数$(“.zxx_text_overflow”).each( ...

  5. ISO13485给企业带来的益处

    1.ISO13485变强制性认证,日益受到欧美和中国政府机构的重视,有利于消除国际贸易中的技术壁垒,是进入国际市场的通行证: 2.提高和改善企业的管理水平,增加企业的知名度: 3.提高和保证产品的质量 ...

  6. C++之vector中元素删除

    今天在删除vector中的元素中遇到一个问题,这里记录下来以便以后查阅. 预备知识:用到了erase()函数,对于一个容器c来说,假设迭代器为p,那么执行: c.erase(p)之后就删除了容器c中p ...

  7. constraint使用方法总结

    主要就是添加约束的 下面几种约束 .并 一一列举: 1.主键约束: 要对一个列加主键约束的话,这列就必需要满足的条件就是分空 由于主键约束:就是对一个列进行了约束,约束为(非空.不反复) 下面是代码  ...

  8. Codeforces Round #188 (Div. 2) A. Even Odds 水题

    A. Even Odds Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/318/problem/ ...

  9. (转)用AGG实现高质量图形输出(三)

    转自 :http://www.cnblogs.com/CoolJie/archive/2011/04/27/2030260.html 线段生成器(Span Generator) 我们前面举的例子使用的 ...

  10. Ubuntu：Target filesystem doesn&#39;t have /sbin/init (Slax 解决)

    计算机(Ubuntu)因为异常断电或是其它原因,再次启动时.非常不幸的出现: Killed mount: mounting /dev on /root/dev failed: No such file ...