css奇特用法之 IMG添加背景图片配合显示--效果惊艳
- 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添加背景图片配合显示--效果惊艳的更多相关文章
- extjs中新建窗体时,给窗体添加背景图片不显示问题之一
1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了 layout: 'fit', Ext.create('Ext.Window', { title: ...
- 自定义编辑框VC,可加载更改字体,添加背景图片,显示输入提示信息
搞了一天终于弄了个完整的编辑框控件出来了, 哎,,,搞界面开发还是有点复杂的. #pragma once #include "AdvEdit.h" // CBkgEditBox c ...
- css代码添加背景图片常用代码
css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...
- vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容: 添加红框中的内容即 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- Java怎么添加背景图片
首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; im ...
- 如何在使用itext生成pdf文档时给文档添加背景图片
这个问题我在网上搜了很久,没有找到什么解决方案,需求其实很简单,就是添加背景图片.在解决这个问题之前,我们需要了解什么是背景图片?背景图片就是位于文档最底层的图片,文字和其他内容可以浮在它的上面.这又 ...
- C#(winform)为button添加背景图片
1.既然是添加背景图片 所以这里应该使用 Button.BackgroudImage = "" ;来设置图片 而不应该使用 Button.Image = "" ...
- iOS 中 为UIView添加背景图片
创建UIImage的方法有两种: UIImage *image = [UIImageimageNamed:@"image.jpg"];//这种不释放内存,要缓存 NSString ...
随机推荐
- mysql 清除数据库数据
select Concat('TRUNCATE TABLE ', TABLE_NAME, ';') from INFORMATION_SCHEMA.TABLES
- The IAR Archive Tool—iarchive
The IAR Archive Tool—iarchive—creates and manipulates a library (anarchive) of several ELF object fi ...
- windows7下实现局域网内文件共享
1.右击桌面网络----属性----更改高级共享设置 (注释:查看当前网络 比如:家庭网络.公共网络 等!) "我这里为公共网络" 2.选择 公共网络---选择以下选项:启动网络发 ...
- Codeforces 427 D. Match & Catch
后缀数组.... 在两个串中唯一出现的最小公共子串 D. Match & Catch time limit per test 1 second memory limit per test 51 ...
- C# 二进制字节流查找函数IndexOf
C# 二进制字节流查找函数IndexOf /// <summary> /// 报告指定的 System.Byte[] 在此实例中的第一个匹配项的索引. /// </summary&g ...
- JavaScript中伪协议 javascript:研究
将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中.这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的 ...
- BZOJ 4318: OSU! 期望DP
4318: OSU! 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4318 Description osu 是一款群众喜闻乐见的休闲软件 ...
- Looksery Cup 2015 B. Looksery Party 暴力
B. Looksery Party Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/549/pro ...
- Android输入输出系统之TouchEvent流程
一个是InputReader,一个是InputDispatcher.方法是dispatchTouch. 入口点是InputReader 的loopOnce方法. InputReader里面有个线程叫做 ...
- archlinux随记
xrdb -merge .Xresources才能使urxvt的配色显示正常 xpmroot 包含在fvwm包中