html页面校园美景相框,纯CSS+HTML打造图片相框背景

通过纯html+css打造相框效果：

这是在页面上的效果

传统的做法是使用背景图片的方式进行，下面是另类方法，亲测，兼容性还是很不错的：

HTML代码：

CSS部分：

*{margin:0px;padding:0px;}

.w190{width:190px;}

.imgWrap{position:relative;margin-left:2px;margin-right:2px;z-index:90;float:right;}

.imgWrap .bg1{position:absolute;right:-3px;bottom:-3px;background-color:#E3E3E3;width:100%;height:100%;z-index:91;}

.imgWrap .bg2{position:absolute;left:-3px;top:-3px;background-color:#fff;width:100%;height:100%;border:1px solid #E3E3E3;z-index:92;}

.imgWrap .imgDiv{width:100%;height:100%;position:relative;z-index:98;}

.imgWrap .imgDiv div{width:100%;height:100%;padding:10px 13px 13px 7px;}

.imgWrap .imgDiv div img{}

.imgWrap .info{position:relative;z-index:99;padding:10px;}

记得在html页面头上加：

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html页面校园美景相框,纯CSS+HTML打造图片相框背景相关推荐

纯css实现给图片加标签
纯css实现给图片加标签原理:通过border.before.after.content.position定位,等等属性实现给图片添加标签样式. 效果截图如下: 代码实例: <!DOCTYPE ...
html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
纯css实现正方体图片旋转效果
纯css实现正方体图片旋转效果目标效果基本思路代码实现主要困难注意:(该代码暂未解决兼容性问题,在google浏览器中可顺利运行) 目标效果鼠标移入之后,图片开始依次旋转平移,旋转平移完成 ...
html如何实现图片轮流播放,纯css如何实现图片轮播
纯css如何实现图片轮播发布时间:2020-07-29 10:23:33 来源:亿速云阅读:119 作者:Leah 纯css如何实现图片轮播?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希 ...
html页面加载转圈,纯CSS实现加载转圈样式
不同的项目中对于等待加载时转圈圈的样式是不同的,有的是传统的转圈的gif图片,见得比较多的是将转圈圈的换成了可爱的图标.有时候项目中加入等待加载的图片会很违和,不符合美观,所以需要用CSS做一个.下面 ...
html 实现格子效果图,纯CSS实现动态图片的九宫格布局
起因最近碰到这样一个需求,要实现一个"九宫格图片"展示,设计师给过来的稿子是酱的是的,九宫格对应的是九种样式. 天不怕,地不怕,就怕设计有想法. 当一看到这样的需求,很多人的第 ...
如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 ...
纯css hover放大图片
记录自己在工作中遇到的一些比较有意义的,值得去记一记的知识. 这次主要做的是css的hover效果,在所有的效果里,选择了放大,这个也是设计的要求,就做了这个其实这个要求来说,很简单,主要使用的是c ...
纯css svg 改变图片颜色 ios android 小程序
本文出自: http://blog.csdn.net/wyk304443164 使用的是 filter drop-shadow 如果你只想兼容 Chrome 那么请看: http://www.zhan ...

html页面校园美景相框,纯CSS+HTML打造图片相框背景

html页面校园美景相框,纯CSS+HTML打造图片相框背景相关推荐

最新文章

热门文章