Skip to content

Instantly share code, notes, and snippets.

@azusa-tomita

azusa-tomita/index.html

Created September 3, 2019 07:05
Show Gist options
  • Save azusa-tomita/831759f9e9f5e7f607003fa39c1d8dc8 to your computer and use it in GitHub Desktop.
Save azusa-tomita/831759f9e9f5e7f607003fa39c1d8dc8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style id="jsbin-css">
*{margin:0;padding:0;}
.wrap{background:#eff;}
/*
　■imgにラッパー要素(.imgBorder)を指定したパターン
・ie8以上
*/
.imgBorder{
display:inline-block;
position:relative;
z-index:1;
}
.imgBorder:after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box; /* △ ie8 Cr9 Sf5.1 Op8 × Fx */
z-index:10;
border:10px solid #ccc;/* for ie8 */
border:10px solid rgba(100,0,0,.5);
}
.imgBorder img{
vertical-align:bottom;
position:relative;/* ie8 z-index bug fix */
z-index:-1;/* ie8 z-index bug fix */
}
/* ie7以下 */
.imgBorder{
*border:10px solid #ccc;
*overflow:hidden;
}
.imgBorder img{
*display:block;
*margin:-10px;
}
</style>
</head>
<body>
<h1>画像の上に半透明罫線をかぶせる</h1>
<div class="wrap">
<div><span class="imgBorder"><img src="https://www.gravatar.com/avatar/6c4ced6a34e4463864d7303dd821d3e4"></span></div>
<br>
<p>インラインでも使える<span class="imgBorder"><img src="https://www.gravatar.com/avatar/6c4ced6a34e4463864d7303dd821d3e4"></span>あいうえお</p>
<br>
<p>リンクでも使える<a href="#" class="imgBorder"><img src="https://www.gravatar.com/avatar/6c4ced6a34e4463864d7303dd821d3e4"></a>あいうえお</p>
<br>
<p>ただの画像の場合<img src="https://www.gravatar.com/avatar/6c4ced6a34e4463864d7303dd821d3e4">あいうえお</p>
</div>
<script id="jsbin-source-css" type="text/css">*{margin:0;padding:0;}
.wrap{background:#eff;}
/*
　■imgにラッパー要素(.imgBorder)を指定したパターン
・ie8以上
*/
.imgBorder{
display:inline-block;
position:relative;
z-index:1;
}
.imgBorder:after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box; /* △ ie8 Cr9 Sf5.1 Op8 × Fx */
z-index:10;
border:10px solid #ccc;/* for ie8 */
border:10px solid rgba(100,0,0,.5);
}
.imgBorder img{
vertical-align:bottom;
position:relative;/* ie8 z-index bug fix */
z-index:-1;/* ie8 z-index bug fix */
}
/* ie7以下 */
.imgBorder{
*border:10px solid #ccc;
*overflow:hidden;
}
.imgBorder img{
*display:block;
*margin:-10px;
}
</script>
</body>
</html>
Raw
jsbin.volibug.css
*{margin:0;padding:0;}
.wrap{background:#eff;}
/*
　■imgにラッパー要素(.imgBorder)を指定したパターン
・ie8以上
*/
.imgBorder{
display:inline-block;
position:relative;
z-index:1;
}
.imgBorder:after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box; /* △ ie8 Cr9 Sf5.1 Op8 × Fx */
z-index:10;
border:10px solid #ccc;/* for ie8 */
border:10px solid rgba(100,0,0,.5);
}
.imgBorder img{
vertical-align:bottom;
position:relative;/* ie8 z-index bug fix */
z-index:-1;/* ie8 z-index bug fix */
}
/* ie7以下 */
.imgBorder{
*border:10px solid #ccc;
*overflow:hidden;
}
.imgBorder img{
*display:block;
*margin:-10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment