• 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. 六、Linux/UNIX操作命令积累【kill、netstat、df、du】

    在使用Linux/UNIX下,常常会使用文本界面去设置系统或操作系统,作者本人在工作的过程也在不断接触这方面的命令,所以为此特酝酿.准备.開始了本文的编写. 本文主要记录自己平时遇到的一些Linux/ ...

  2. Android调用相机并将照片存储到sd卡上

    Android中实现拍照有两种方法,一种是调用系统自带的相机,然后使用其返回的照片数据. 还有一种是自己用Camera类和其他相关类实现相机功能,这种方法定制度比较高,洗染也比较复杂,一般平常的应用只 ...

  3. Kubuntu（14.04）共享wifi（热点）

    笔记本(kubuntu14.04)通过有线上网,共享本机无线给手机.平板及其他通过wifi上网的设备. 曾经在网上找过各种方法.下载了非常多软件都不能在本机上实现wifi共享,以下这样的方法眼下相对简 ...

  4. 怎样用JS来添加CSS样式

    方法: document.getElementById("xx").style.xxx中的全部属性是什么 盒子标签和属性对比 CSS语法(不区分大写和小写) JavaScript语 ...

  5. hdu 1078 FatMouse and Cheese （dfs+记忆化搜索）

    pid=1078">FatMouse and Cheese Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/ ...

  6. 信号之sigprocmask函数

    一个进程的信号屏蔽字规定了当前阻塞而不能递送给该进程的信号集.调用函数sigprocmask可以检测或更改其信号屏蔽字,或者在一个步骤中同时执行这两个操作. #include <signal.h ...

  7. Foxit Reader 插件下载

    http://www.foxitsoftware.com/Secure_PDF_Reader/addons.php#install 百度云:http://pan.baidu.com/s/1i3DSlv ...

  8. ubuntu11.04编译TQ2440 Qt2.2.0 成功

    转:http://blog.csdn.net/xuehui869/article/details/8958311 运行主机:ubuntu 32位 11.04QT版本:2.2.0开发板:TQ2440源码 ...

  9. keytool 错误 java.io.IOException: incorrect AVA format

    给一个APK做签名,选择新建一个key并填写相关信息,但在Finish时,keytool报出了一个错误:keytool error: java.io.IOException: Incorrect AV ...

  10. 关于Android LayoutInflater的解释

    LayoutInflater的作用就是动态加载xml布局好的界面,类似于findViewById()来获取已经定义好的控件一样.不同点是LayoutInflater是用来找res/layout/下的x ...