[分享]css上存图片的按钮

在网站设计中，存储图片是非常重要的一项工作。对于按钮的设计，我们通常会用到CSS来实现。那么，如何在CSS中存储图片呢？下面介绍一些方法。.btn { backgroundimage: url(../...

在网站设计中，存储图片是非常重要的一项工作。对于按钮的设计，我们通常会用到CSS来实现。那么，如何在CSS中存储图片呢？下面介绍一些方法。

.btn {
    background-image: url(../img/button.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 40px;
    border: none;
    cursor: pointer;
} 

我们可以看到上述CSS代码的核心是使用background-image属性在CSS中存储图片。其中的url方法可以指向存储图片的路径。此外，我们还可以使用其他的属性来调整图片的表现效果。比如使用background-repeat属性来设置图片是否重复，使用background-position属性来设置图片在按钮中的位置等等。

有些时候，我们需要在按钮中使用多张图片。这时候可以使用CSS Sprites技术，将多张图片合成为一张大图片，再在CSS中调用所需要的部分。

.btn {
    background-image: url(../img/sprites.png);
    background-repeat: no-repeat;
    height: 50px;
    width: 100px;
}

.btn-home {
    background-position: -10px -20px;
}

.btn-login {
    background-position: -110px -20px;
}

.btn-register {
    background-position: -210px -20px;
} 

上述CSS代码中，我们通过background-image属性指定按钮需要使用的图片，然后使用background-position属性来确定需要显示的部分。在这段代码中我们使用了.sprites.png这张图片，里面包含了btn-home、btn-login和btn-register等多张图片。然后我们通过较小的CSS代码来实现了多张图片的合成。

总的来说，CSS中存储图片的方法非常多，适用于不同的情况和需求。通过灵活运用这些技巧，我们可以打造出非常漂亮、实用的网页设计。