相信大家在使用css時會遇到一個情況吧 就是一張大圖片里面什么都有 各種圖標都有 然而自己就是不太會使用其中的小圖標 這是我最近的一次學習 首先上圖
這么大一張圖片 那么這么使其只顯示一部分 並且為我所用勒 這是上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
}
#image{
width: 40px;
height: 40px;
background-image: url(img/su.jpg);
background-repeat: no-repeat;
background-position: -200px -240px;
/*申明 大圖片是有了 40px一個 每個直接間距為40px 而且第一個表示距離x的距離 第二個表示距離y的距離*/
}
</style>
</head>
<body>
<diV id="image">
</diV>
</body>
</html>
核心的代碼是
<style> #image{ width: 40px; height: 40px; background-image: url(img/su.jpg); background-repeat: no-repeat; background-position: -200px -240px; /*申明 大圖片是有了 40px一個 每個直接間距為40px 而且第一個表示距離x的距離 第二個表示距離y的距離*/ } </style> <diV id="image"> </diV>
這里將div設置為id為image 而且這個文件的路徑url(img/su.jpg)這些都必須設置好 這樣就能夠使用這個大圖片了
顯示效果是這樣的
