• 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. WSO2 ESB

    什么是WSO2 ESB? WSO2 ESB是一个轻量级的易于使用的企业服务资源总线.WSO2 ESB允许系统管理员和SOA架构师,消息路由,虚拟化,中介,转换,日志记录,任务调度,负载平衡,失败了路由 ...

  2. WPF中的数据模板(DataTemplate)(转)

    原文地址 http://www.cnblogs.com/zhouyinhui/archive/2007/03/30/694388.html WPF中的数据模板(DataTemplate)        ...

  3. Google Chrome浏览器调试功能介绍

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  4. 【转】android出现注: 某些输入文件使用或覆盖了已过时的 API。 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译。 注: 某些输入文件使用了未经检查或不安全的操作。 注

    使用Android studio打包应用程序出现如下错误: 注: 某些输入文件使用或覆盖了已过时的 API. 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译. 注: 某些 ...

  5. UVa11218 KTV

    // Rujia Liu // 题意:给出n个带权集合,每个集合包含1~9中的三个整数.找出其中三个集合,使得1~9恰好各出现一次,且权和最大 // 算法:暴力n^2枚举前两个集合,直接计算出第三个集 ...

  6. ASP.net中GridView中增加一行记录并默认显示为编辑状态

    //添加 protected void Button1_Click(object sender, EventArgs e) { DataSet ds = (DataSet)pa.GetDataSet( ...

  7. [程序猿入行必备]CSS样式之优先级

    专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...

  8. 将表中数据生成SQL语句

    在开发过程中,经常需要我们对表中的数据进行转移,如果在同台机器,可以使用SQL自带的导入数据,但是如果想让所有的数据生成可执行的SQL语句,它的移植性最强了.首先要设计一个存储过程.具体如下: CRE ...

  9. sql server常用知识点

    --删除表 use [20130823_Recource] go drop table my_table1,my_table2,My_table3 --创建表 use [20130823_Recour ...

  10. 汉化Eclipse+配色方法(官方语言包)

    一. 汉化方法: 1.Eclipse版本查询:安装目录readme,查版本号;参照查代号如下表: 代号 平台版本 项目 主要版本发行日期 SR1发行日期 SR2发行日期 N/A 3.0 [1] N/A ...