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>

----转载

时间： 2024-08-03 21:29:59

css奇特用法之 IMG添加背景图片配合显示--效果惊艳的相关文章

extjs中新建窗体时，给窗体添加背景图片不显示问题之一

1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了 layout: 'fit', Ext.create('Ext.Window', { title: '客户关系管理系统', width: 1024, height: 600, //plain: true, bodyStyle: 'background:url(images/登录背景.jpg);', headerPosition: 'top', layout: 'fit', items: { bor

自定义编辑框VC,可加载更改字体，添加背景图片，显示输入提示信息

搞了一天终于弄了个完整的编辑框控件出来了, 哎,,,搞界面开发还是有点复杂的. 1 #pragma once 2 3 #include "AdvEdit.h" 4 // CBkgEditBox 5 6 class CBkgEditBox : public CEdit 7 { 8 DECLARE_DYNAMIC(CBkgEditBox) 9 10 public: 11 CBkgEditBox(); 12 virtual ~CBkgEditBox(); 13 14 protected: 1

css代码添加背景图片常用代码

css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; height: 0px; margin: 20px 0px;"> 2 背景图片 {background-image: url(url)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {

css给未知宽高的元素添加背景图片

给页面的某一元素添加背景图片,当没有指定具体的宽高时,是无法显示效果的 1.添加背景图 HTML代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,mi

导航链接添加背景图片替换样式

HTMl代码: <div class="welcome_button"> <ul> <li><a href="#">signup</a></li> <li><a href="#">login</a></li> </ul> </div> CSS样式: <style type="text/cs

C#(winform)为button添加背景图片

1.既然是添加背景图片所以这里应该使用 Button.BackgroudImage = "" ;来设置图片而不应该使用 Button.Image = ""; 因为使用BackgroudImage来设置背景图片,我们还可以使用 BackgroundImageLayout来调节图片,让图片更好的显示在button上通常使用: 1 this.btnReset.BackgroundImage = global::Test.Properties.Resources.b

img只显示图片一部分或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置部分代码:<style type="text/css">img {position:abs

MFC添加背景图片

1.在资源里导入一个bmp图片假设名称为IDB_BITMAP1 实现OnPaint方法 CPaintDC dc(this); CRect rect; GetClientRect(&rect); CDC dcMem; dcMem.CreateCompatibleDC(&dc); CBitmap bmpBackground; bmpBackground.LoadBitmap(IDB_BITMAP1); //IDB_BITMAP是你自己的图对应的ID BITMAP bitmap; bmpBack

swing-窗体添加背景图片的2种方法

在美化程序时,常常需要在窗体上添加背景图片.通过搜索和测试,发现了2种有效方式.下面分别介绍.1.利用JLabel加载图片利用JLabel自带的setIcon(Icon icon)加载icon,并设置JLabel对象的位置和大小使其完全覆盖窗体.这是一个很取巧的办法,代码非常简单,如下所示. JLabel lbBg = new JLabel(imageIcon); lbBg.setBounds(0, 0, frameSize.width, frameSize.height); this.getC