CSS对象图片-雪哥尔

width: 80px;height: 80px; /*对象宽高*/
background-image: url(https://imgs.xulgr.com/xg800.png); /*图片路径*/
background-size:80px 80px; /*调整background-image图片大小*/
background-repeat: no-repeat; /*图片仅显示一次*/

实例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS对象图片 - Xulgr雪哥尔</title>
<link rel="stylesheet" href="https://code.xulgr.com/pub/layui/css/layui.css?v=1.0.0" />
<link rel="stylesheet" href="https://code.xulgr.com/css/btn/xulgrbtn?v=1.0.1">
<link rel="stylesheet" href="https://code.xulgr.com/pub/css/xulgricon.css?v=1.0.5" />
<script type="text/javascript" src="https://code.xulgr.com/pub/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="https://code.xulgr.com/pub/js/layer/layer.js"></script>

<style>
body{margin-top:50px;background-color:#00b9ff;margin-bottom:50px;}
div{margin-top:20px;}
.xulgr{
 width: 80px;height: 80px; /*对象宽高*/
 background-image: url(https://imgs.xulgr.com/xg800.png); /*图片路径*/
 background-size:80px 80px; /*调整background-image图片大小*/
 background-repeat: no-repeat; /*图片仅显示一次*/
}
.xulgr:hover{
 width: 80px;height: 80px; /*对象宽高*/
 background-image: url(https://imgs.xulgr.com/xg800_h.png); /*图片路径*/
 background-size:80px 80px; /*调整background-image图片大小*/
 background-repeat: no-repeat; /*图片仅显示一次*/
 color:#fff;
}
.xulgr2{
 width: 80px;height: 80px; /*对象宽高*/
 background-image: url(https://imgs.xulgr.com/xg800.png); /*图片路径*/
 background-size:80px 80px; /*调整background-image图片大小*/
 background-repeat: no-repeat; /*图片仅显示一次*/
 border-radius:10px;
}
.xulgr3{
 width: 80px;height: 80px; /*对象宽高*/
 background-image: url(https://imgs.xulgr.com/xg800.png); /*图片路径*/
 background-size:80px 80px; /*调整background-image图片大小*/
 background-repeat: no-repeat; /*图片仅显示一次*/
 border-radius:100px;
}
.xulgr4{
 width: 80px;height: 80px; /*对象宽高*/
 background-image: url(https://imgs.xulgr.com/xg800_h.png); /*图片路径*/
 background-size:80px 80px; /*调整background-image图片大小*/
 background-repeat: no-repeat; /*图片仅显示一次*/
 border-radius:10px;
 border:5px solid #fff;
}
.xulgr5{
 width: 80px;height: 80px; /*对象宽高*/
 background-image: url(https://imgs.xulgr.com/xg800.png); /*图片路径*/
 background-size:80px 80px; /*调整background-image图片大小*/
 background-repeat: no-repeat; /*图片仅显示一次*/
 border-radius:10px;
 border:5px transparent solid;
 border-image:linear-gradient(to bottom right,#ff0000,#0000ff) 5 5;
}
.xulgr6{
 width: 80px;height: 80px; /*对象宽高*/
 background-image: url(https://imgs.xulgr.com/xg800.png); /*图片路径*/
 background-size:100%; /*调整background-image图片大小*/
 background-repeat: no-repeat; /*图片仅显示一次*/

 position: relative;
 border: 4px solid transparent;
 border-radius: 10px;
 background-clip: padding-box;
 padding: 10px;
 box-shadow: 0 3px 9px #ff0000, inset 0 0 9px #0000ff;
}
.xulgr6::after{
 position: absolute;
 top: -4px; bottom: -4px;
 left: -4px; right: -4px;
 z-index: -1;
 border-radius: 10px;
 color:#0000ff;
}
</style>

</head>
<body>


<center>
    
<div class="xulgr"></div>

<div class="xulgr2"></div>

<div class="xulgr3"></div>

<div class="xulgr4"></div>

<div class="xulgr5"></div>

<div class="xulgr6"></div>

</center>









</body>
</html>

运行代码

文章版权归作者所有，未经允许请勿转载。

THE END

CSS

CSS对象图片

请登录后发表评论