• 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. 【ToolGood.Words】之【StringSearch】字符串搜索——基于BFS算法

    字符串搜索中,BFS算法很巧妙,个人认为BFS算法效率是最高的. [StringSearch]就是根据BFS算法并优化. 使用方法: string s = "中国|国人|zg人|fuck|a ...

  2. 记录一点自己写的Php代码（1）取得任意种类，无限级下线

    //获取所有下线 function get_all_heeler($user_id,$user_rank = 0){ $user_id_array = $user_id; while (true) { ...

  3. k近邻法的C++实现：kd树

    1.k近邻算法的思想 给定一个训练集,对于新的输入实例,在训练集中找到与该实例最近的k个实例,这k个实例中的多数属于某个类,就把该输入实例分为这个类. 因为要找到最近的k个实例,所以计算输入实例与训练 ...

  4. 【M25】将构造方法和非成员方法虚化

    1.所谓虚化,就是根据引用或者指针的真实类型,决定调用哪个方法. 2.构造方法虚化,就是根据引用(或者指针)的真实类型,构造出一个对象,如果指针的真实类型是Base,返回Base*:如果指针的真实类型 ...

  5. HDU 4941 Magical Forest 【离散化】【map】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4941 题目大意:给你10^5个点.每一个点有一个数值.点的xy坐标是0~10^9.点存在于矩阵中.然后 ...

  6. [Buzz.Today]2013.08.06

    # 用简单方案解决80%的问题,再慢慢解决剩下20% [先完成,后完美]美国工程院院士.Google Fellow辛格的哲学:先用个简单方案解决80%的问题,再慢慢解决剩下20%.许多优秀人才都败在这 ...

  7. 使用boost的deadline_timer实现一个异步定时器

    概述 最近在工作上需要用到定时器,然后看到boost里面的deadline_timer可以实现一个定时器,所以就直接将其封装成了ATimer类,方便使用,ATimer有以下优点: 可以支持纳秒.毫秒. ...

  8. LeetCode11 Container With Most Water

    题意: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...

  9. sort() 方法用于对数组的元素进行排序

    语法 arrayObject.sort(sortby) 参数 描述 sortby 可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注意,数组在原数组上进行排序,不生成副本. 说明 如果调用该 ...

  10. 【源码】基于SQLite实现CMS论坛(BBS)----附件SQLite可视化界面客户端

              使用说明:管理员账号:admin  密码:523523523   一.  账号管理(登陆注册审核) 1.账号注册 url:/BBS/Account/pregister.aspx 2 ...