可以给img元素设置背景图

实现方法很简单：设置 img 元素为块元素（display:block;），并赋一个 padding 值。

Image Demo

div {
background: url('http://img.jb51.net/images/blur.jpg') no-repeat top left;
width: 232px;
height: 200px;
}
img {
display: block;
background: url('http://img.jb51.net/images/parallax.gif') no-repeat bottom left;
padding: 93px 100px 75px 100px;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

代码如下:

img {
display:block; b
ackground:url('parallax.gif') no-repeat bottom left;
padding:93px 100px 75px 100px;}

根据上面的原理，举一反三，通过类似的方法，我们还可以给 img 元素设置双边：


代码如下:

img {
display:block;
padding:1px;
background:red;
border:1px solid black;
}

赞 (0)

相关推荐

  • 可以给img元素设置背景图

    可以给img元素设置背景图

    实现方法很简单:设置 img 元素为块元素(display:block;),并赋一个 padding 值. Image Demo div { background: url('http://img.jb51.net/images/blur.jpg') no-repeat top left; width: 232px; height: 200px; } img { display: block; background: url('http://img.jb51.net/images/paralla

  • jquery动态更换设置背景图的方法

    有些时候,我们可以为用户提供很贴心的功能,比如判断用户是什么时候来访问的,然后给出一句问候,晚上好,下午好之类的.并且更换网页的背景颜色,比如晚上的时候就可以用满天星星的背景,白天就用阳光灿烂,或者特定节日就用该主题背景,让你的网站显得非常灵活,不枯燥. 下面就如何实现背景更换给出一种解决方法: 如何实现 很简单,下面是 JQuery 代码: 复制代码 代码如下: function doChangeBkg(){ var bkgUrl=$("#inputBkgUrl").val(); v

  • 解决Vue2.0中使用less给元素添加背景图片出现的问题

    在使用less在Vue.js中给元素添加背景图片时 或者你会出现这样的写法 background-image: url('../img/' + @{bg_url} + '2x.png'); 或者这样 background-image: url('../img/' + @bg_url + '2x.png'); 这样 background-image: url(../img/@{bg_url}2x.png); 还有这样 background-image: url(../img/@bg_url2x.p

  • C#使用iTextSharp设置PDF所有页面背景图功能实例

    本文实例讲述了C#使用iTextSharp设置PDF所有页面背景图功能的方法.分享给大家供大家参考.具体如下: 在生成PDF 的时候,虽然可以在页面中设置背景图. 但有些内容过长夸页面的时候,就很难设置背景图,变成了空白背景的页面! 以下是重新生成每一页 PDF 背景图功能代码! public void SetPdfBackground(string pdfFilePath) { //重新生成的 PDF 的路径 string destFile = HttpContext.Current.Serv

  • iOS实现动态元素的引导图效果

    iOS实现动态元素的引导图效果

    前言 最近越来越多的APP,已经抛弃掉第一次进入的3-4页的导入页面,而是另外采取了在功能页面悬浮一个动态效果来展示相应的功能点.这个模块主要是实现app首次进入时显示的动态的引导图,在用户进行右滑或者左滑的时候,屏幕上的一些元素做出相应的隐藏消失以及位置移动. 实现效果: 图片资源来自网络,侵权即删 先来看看是如何使用的,然后再介绍相关的方法及属性 NSMutableArray * elementsDataArr = [[NSMutableArray alloc] init]; /* 动画元素

  • iOS实现从背景图中取色的代码

    本文实例讲解了iOS从背景图中取色的代码,分享给大家供大家参考,具体内容如下 实现代码: void *bitmapData; //内存空间的指针,该内存空间的大小等于图像使用RGB通道所占用的字节数. static CGContextRef CreateRGBABitmapContext (CGImageRef inImage) { CGContextRef context = NULL; CGColorSpaceRef colorSpace; int bitmapByteCount; int

  • 使用javascript控制cookie显示和隐藏背景图

    每当重大节日期间,各大主流网站首页会披上节日的盛装,设计者一般会使用大幅背景图片来获得更好的视觉冲击效果,当然,也要考虑到有些用户不习惯这大背景图,那么在背景图上放置"关闭"按钮是有必要的,用户只要点击"关闭背景"按钮,大幅背景图将会消失. 我们使用javascript来控制背景图片的显示和隐藏,当点击关闭按钮时,控制CSS使页面不加载背景图,同时记录COOKIE相关参数,并设置cookie的有效期,那么在cookie有效期内刷新页面,是不会再加载背景图的,如果co

  • jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

    jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

    本文实例讲述了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法.分享给大家供大家参考,具体如下: 1.问题背景 设计一条折线图,但是图形中不用插件自带的颜色,需要自定义线条和折点的颜色 2.实现源码 (1)图形自分配颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-设置折线图中折线线条颜色和折线点颜色</t

  • Android编程简单实现ImageView点击时背景图修改的方法

    本文实例讲述了Android编程简单实现ImageView点击时背景图修改的方法.分享给大家供大家参考,具体如下: 在使用ImageView时,当被点击时,希望背景图修改一下,这样显示被点击效果明显一些.在这里,一个很简单的方法,最起码是个很清晰的方法.在res/drawable文件夹下创建一个xml文件.比如my.xml,内容如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:an

  • Android中给按钮同时设置背景和圆角示例代码

    Android中给按钮同时设置背景和圆角示例代码

    前言 最近在做按钮的时候遇到在给按钮设置一张图片作为背景的同时还要自己定义圆角,最简单的做法就是直接切张圆角图作为按钮就可以了,但是如果不这样该怎么办呢,看代码: 下面来看效果图 一.先建一个圆角的shape文件: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

随机推荐