• 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. github命令

    git push origin master //把本地源码库push到Github上 git pull origin master //从Github上pull到本地源码库

  2. Asp.Net BulletedList

    BulletedList使用及详解 BulletedList是一个让你轻松在页面上显示项目符号和编号格式(Bulledted List)的控件.对于ASP.NET 1.x里要动态显示Bulledted ...

  3. Codefoces 429 D. Tricky Function

    裸的近期点对.... D. Tricky Function time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  4. [Jobdu] 题目1531：货币面值

    题目描述: 小虎是游戏中的一个国王,在他管理的国家中发行了很多不同面额的纸币,用这些纸币进行任意的组合可以在游戏中购买各种装备来提升自己.有一天,他突然很想知道这些纸币的组合不能表示的最小面额是多少, ...

  5. 使用NPOI导出DataTable到Excel

    使用C#对DataTable导出到Excel是我们工作当中比较多用到的场景,微软提供了Microsoft.Office.Interop.Excel组件可以进行操作,但是该组件在数据量大的时候速度很慢, ...

  6. Android 多级树形菜单

    在Android里要实现树形菜单,都是用ExpandableList(也有高手自己继承ListView或者LinearLayout来做),但是ExpandableList一般只能实现2级树形菜单... ...

  7. because it is not a variable 编译错误解决方案

    1,将Stuct换为class 2,使用中间变量, 如Point p=new Point(x,y); this.Location=p; 而不能直接给struct赋值,因为值类型是不能改变的,必须生成新 ...

  8. 项目源码--Android新闻财经类商用要求源码

    技术要点: 1. 商用要求源码框架 2. 登录与注册用户系统模块 3. Android的Http通信以及多线程处理模块 4. Andorid的网络数据处理模块 5. Andorid的版本检测与升级模块 ...

  9. 小白日记50：kali渗透测试之Web渗透-CSRF

    CSRF CSRF原理:经常与XSS混淆. 从信任的角度进行区分:XSS:利用用户对站点的信任:CSRF:利用站点对已经身份认证的信任(有一定的信任)[默认情况:站点不信任客户端] 结合社工在身份认证 ...

  10. Spring MVC学习笔记 01

    applicationcontext.xml的配置 <?xml version="1.0" encoding="UTF-8" ?> <bean ...