[分享]css3按钮透明背景图片

CSS3按钮透明背景图片是一种非常流行的设计元素，它可以使按钮看起来更加美观和有吸引力。下面我们来看一下如何使用CSS3来创建透明背景图片的按钮：.button{ backgroundcolor: t...

CSS3按钮透明背景图片是一种非常流行的设计元素，它可以使按钮看起来更加美观和有吸引力。下面我们来看一下如何使用CSS3来创建透明背景图片的按钮：

.button{
    background-color: transparent;
    background-image: url('button.png');
    background-size: 100% 100%;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    height: 50px;
    line-height: 50px;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    width: 200px;
}
.button:hover{
    opacity: 0.8;
} 

代码解释：

首先我们定义了按钮的背景颜色为透明色，然后设置了一个背景图片。在background-image属性中，我们将图片的URL链接添加到引号中。background-size属性被设置为100% 100%，这样图片就会填满整个按钮的背景。我们还设置了其他的CSS属性来调整按钮的大小，颜色和字体样式等。

最后，我们使用:hover伪类和opacity属性来制作按钮的动态效果。当鼠标放在按钮上时，按钮的透明度将降低，从而使它看起来更加明亮和吸引人。